Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码
Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件
提纲
本次优化构建代码质量基本技术：
reactRouter按需加载；
公共代码提取，以及代码压缩；
CDN接入；
开启gzip压缩；
接入treeShaking，剔除无用代码
开启Scope Hoisting
（生产环境代码构建）为实时查看每次配置后代码构建情况，使用Webpack监听文件避免每次手动build，并且开启webpack-jarvis，实时查看构建分析，npm i -D webpack-jarvis。
开启监听模式
watch: true, watchOptions: { ignored: /node_modules/, // 忽略监听文件 aggregateTimeout: 300, //文件变动后多久发起构建 poll: 1000, //每秒询问次数，越小越好 }
一、react-router4实现按需加载
单页应用按需加载一般原则：
将网站划分成一个个小功能，在按照每个功能的相关度将他们分成几个类；
将没一个类合并成一个chunk，按需加载对应的代码；
不可将用户首次进入网站时需要看到画面的对应功能Chunk按需加载；
被分割出去的代码的加载需要一定的触发时机，即当用户操作了或者即将操作对应功能时再去加载对应的代码（默认使用react-router按需加载的触发条件是路由的变化）
实现条件：
使用插件：npm i react-loadable;
配合bable插件npm i @babel/plugin-syntax-dynamic-import;
代码示例：
// .bablerc { "plugins": ["@babel/plugin-syntax-dynamic-import"] } // 示例代码 Loadable({ loader: () => import('./component'), //按需加载组件 loading: Loading, //处理组件加载的loading、error等 delay: 300 //延迟加载避免loading的闪烁问题 }); // Loading组件自定义 // 接受三个props，其中pastDelay：等待时触发；timedOut：超时时触发超过delay；error：出错触发默认为200ms const 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; };
二、提取公共代码webpack.optimization
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, //该配置项是设置处理的优先级，数值越大越优先处理 } } }
三、压缩文件js\css
使用npm i -D webpack-parallel-uglify-plugin启用多线程并行压缩JS
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
使用插件：optimize-css-assets-webpack-plugin、mini-css-extract-plugin
使用示例：