本文详细解析Webpack构建质量优化方案，涵盖React Router按需加载配置、公共代码提取与JS/CSS压缩策略。通过接入CDN、开启Gzip、Tree Shaking剔除死代码及Scope Hoisting提升作用域，结合webpack-jarvis实时监控，实现线上代码体积最小化与运行效率最大化。
Webpack构建质量优化概述
Webpack构建速度优化基本完成，接下来的重点转向线上代码质量的提升，即如何利用Webpack构建出更高质量的代码。
Webpack的标准构建流程包括：初始化配置参数、绑定事件钩子回调、确定Entry并逐一遍历、使用Loader编译文件，最后输出文件。
优化提纲如下。
本次构建代码质量优化的核心技术点包括：
- React Router实现按需加载；
- 提取公共代码并进行压缩；
- 接入CDN服务；
- 开启Gzip压缩；
- 接入Tree Shaking以剔除无用代码；
- 开启Scope Hoisting。
在生产环境构建时，为了实时查看每次配置后的代码构建情况，建议使用Webpack监听文件功能以避免每次手动执行build，并开启npm i -D webpack-jarvis以实时查看构建分析。
具体操作为开启监听模式。
watch: true,
watchOptions: {
ignored: /node_modules/, // 忽略监听文件
aggregateTimeout: 300, //文件变动后多久发起构建
poll: 1000, //每秒询问次数，越小越好
}React Router 4实现按需加载
一、React Router 4实现按需加载
单页应用（SPA）的按需加载通常遵循以下原则：
- 将网站划分为多个小功能模块，并根据相关度将这些功能归类；
- 将每个类合并为一个Chunk，按需加载对应的代码；
- 用户首次进入网站时必需看到的功能对应的Chunk不应被按需加载，而应作为首屏资源；
被分割出去的代码需要设定触发时机，即当用户操作或即将操作对应功能时再加载相应代码（默认情况下，react-router的按需加载触发条件是路由变化）。
实现按需加载需满足以下条件：
使用插件：npm i react-loadable；
配合Babel插件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。
使用示例如下。
// 提取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
}),
]CDN接入与Gzip压缩配置
Webpack配置接入CDN。
CDN。
网站接入CDN时，需将网页的静态资源上传至CDN服务器，并通过CDN地址进行访问；
使用CDN可以解决资源并行下载限制，以及处理静态资源Cookie同域名携带等问题；
CDN缓存和回源策略需合理设置。静态资源Hash接入CDN会引入多个域名，从而增加域名解析时间，因此可进行预解析域名<link rel="dns-prefetch" href="//js.dns.com" rel="external nofollow" />。
Webpack实现接入CDN的具体步骤如下：
- 通过
output.publicPath设置JavaScript地址； - 通过
css-loader.publicPath设置CSS导入的资源地址； - 在
WebPlugin.stylePublicPath中设置Css文件地址。
// JavaScript
output: {
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",
},开启Gzip压缩。
使用插件：npm i -D compression-webpack-plugin；
Webpack配置如下。
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//只有压缩率比这个值小的资源才会被处理
})
]后台开启使用koa。
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,
}))Tree Shaking与Scope Hoisting实战
接入Tree Shaking，剔除无用代码。
Tree Shaking可以用来找出有用代码，去除JavaScript中用不上的死代码；但它依赖于ES6静态模块语法import\export的导入和导出。
Webpack接入步骤如下：
修改.babelrc以保留ES6模块语句；
注意新版本babel-preset-env已经预设babel-preset-es2015，Babel推荐使用babel-preset-env取代babel-preset-es2015，并且继续使用babel-preset-es2015会发出警告信息。
{
"presets": [
["env", {
"modules": false
}]
],
"plugins": ["syntax-dynamic-import"]
}
webpack --display-used-exports运行构建带上--display-used-exports可追踪到Tree Shaking的工作；
Webpack只能正确分析如何剔除死代码，需要接入UglifyJs处理剔除（配置见上文）。
开启Scope Hoisting。
scope hoisting即作用域提升；
在构建过程中，Webpack会借助ES6模块化的静态特性，确定模块的依赖关系，将一个Bundle中的静态依赖提升到顶部（因此需要和接入Tree Shaking一样配置Babel开启ES6模块化）；
原理：分析模块间的依赖关系，尽可能将零散的模块合并到一个函数中，前提是不能造成代码冗余，因此只有被引用了一次的模块才能被合并。
接入的好处包括：
代码体积减少；
代码在运行时因为创建的函数作用域更少，内存开销也随之变小；
通过webpack接入ModuleConcatenationPlugin内置插件。
const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
plugins: [
new ModuleConcatPlugin(), //开启scope Hoisting
],以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。