性能优化篇之Webpack构建代码质量压缩的建议

watch: true,watchOptions: {  ignored: /node_modules/, // 忽略监听文件  aggregateTimeout: 300, //文件变动后多久发起构建  poll: 1000, //每秒询问次数，越小越好}

// .bablerc{ "plugins": ["@babel/plugin-syntax-dynamic-import"]}// 示例代码Loadable({ loader: () => import('./component'), //按需加载组件 loading: Loading, //处理组件加载的loading、error等 delay: 300 //延迟加载避免loading的闪烁问题});// Loading组件自定义// 接受三个props，其中pastDelay：等待时触发；timedOut：超时时触发超过delay；error：出错触发默认为200msconst Loading = ({ pastDelay, timedOut, error }) => {  if (pastDelay) {   return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>  } else if (timedOut) {   return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>  } else if (error) {   return <div>Error!</div>;  }  return null;};

optimization: {  splitChunks: {   chunks: "all",   cacheGroups: {    vendors: {       test: /node_modules/,      name: 'vendors',       minSize: 0,      minChunks: 1,       chunks: 'initial',      priority: 2 // 该配置项是设置处理的优先级，数值越大越优先处理     },    commons: {     name: "comomns",     test: resolve("src/components"), // 可自定义拓展规则     minChunks: 2, // 最小共用次数     minSize:0,  //代码最小多大，进行抽离     priority: 1, //该配置项是设置处理的优先级，数值越大越优先处理     }  }}

optimization: {  minimizer: [    new ParallelUglifyPlugin({      cacheDir: '.cache/', //缓存压缩，默认不缓存，设置存放位置开启      test: /.js$/, //匹配需要压缩的文件，默认为/.js$/和Loader配置一样      //include: [], 使用正则去选择需要被压缩的文件和Loader配置一样      //exclude: [], 使用正则去去除不需要被压缩的文件和Loader配置一样      //workerCount: 2, 开启几个子进程并发执行压缩      // sourceMap: false, 是否输出source Map，开启会导致压缩变慢      // uglifyJS: {}, 用于压缩ES6代码不可和uglifyJS同时使用      uglifyJS:{//压缩ES5代码        output: {          // 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false          beautify: false,          //是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false          comments: false        },        compress: {          //是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出          warnings: false,          //是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句          drop_console: true,          //是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 1, 默认为否          collapse_vars: true,          // 提取出现多次但是没有定义成变量去引用的静态值          reduce_vars:true        }      },    }),  ]},

// 提取css到单独的文件const MiniCssExtractPlugin = require("mini-css-extract-plugin");// optimizeCssPlugin CSS文件压缩插件const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin');const extractSCSS = new MiniCssExtractPlugin({  filename: 'css/[name].[contenthash:8].css',  chunkFilename: 'css/[name]_[contenthash:8].css',  fallback:'style-loader'});......plugins: [  new optimizeCssPlugin({    assetNameRegExp: //.css$/g,    cssProcessor: require('cssnano'),    cssProcessorOptions: { discardComments: { removeAll: true } },    canPrint: true  }),]

// JavaScriptoutput: {  publicPath: '//js.cdn.com/js/',  path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方  // 为输出的JavaScript文件名加上Hash值使用`chunkhash`（chunkhash：根据模块内容变化；hash: 根据每次构建随机）  filename: "js/[name].[chunkhash:8].js",  chunkFilename: "js/[name]-[id].[chunkhash:8].js",},

const CompressionPlugin = require("compression-webpack-plugin");plugins: [  new CompressionPlugin({    filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串    algorithm: 'gzip',//算法    test: //.(js|css)$/,  //压缩 js 与 css    threshold: 10240,//只处理比这个值大的资源。按字节计算    minRatio: 0.8//只有压缩率比这个值小的资源才会被处理  })]

const staticCache = require('koa-static-cache');import config from './configs';const app = new Koa();app.use(staticCache(path.resolve(__dirname, "../dist"), {  maxAge: 7 * 24 * 60 * 60,  gzip: true, //开启  dynamic: true,}))

{ "presets": [  ["env", {   "modules": false  }] ], "plugins": ["syntax-dynamic-import"]}

const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');plugins: [   new ModuleConcatPlugin(), //开启scope Hoisting ],