一. Tree Shaking
- Tree Shaking 描述用于移除 JavaScript 上下文中的未引用代码，它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export
- 使用类似 UglifyJSPlugin 等插件来实现代码压缩与精简
- 安装 uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin --save-dev
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
modules.exports = {
//...
plugins: [new UglifyJSPlugin],
};
二. 生产环境构建
- 开发环境（development）与生产环境（production）的构建目标差异很大，所以应当分离出差异的配置，保留通用的配置，使用 webpack-merge 来分别合并环境差异的配置与通用的配置
- 安装 webpack-merge
npm install webpack-merge --save-dev
- 添加 webpack.common.js 表示通用的配置
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ title: 'Hello Webpack!' }),
],
output: {
filename: '[name].[hash:4].js',
path: path.resolve(__dirname, 'dist'),
},
};
- 添加 webpack.dev.js 表示开发环境下的独立配置
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
},
});
- 添加 webpack.prod.js 表示生产环境下的独立配置
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'source-map',
plugins: [new UglifyJSPlugin()],
});
- 修改 package.json 的 scripts
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
- 在开发环境时运行 npm run start，Source Map 配置为 inline-source-map 使调试更加清晰，并启用 webpack-dev-server
- 在生产环境时运行 npm run build，Source Map 配置为 source-map 在运行时更为快速，并使用 UglifyJSPlugin 来进行代码压缩
- 经常能见到项目中使用了 process.env.NODE_ENV 这个值，这个值并不是一个变量，而是构建开始之前被静态化编译了，所以需要特定的配置使他生效
// webpack.prod.js
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
}),
],
- 当在源码中需要区别于开发环境与生产环境的代码时应这样：
if (process.env.NODE_ENV === 'production') {
// production
} else {
// development
}
三. 代码分离
1. 多入口
- 使用多个入口的方式来达到分离代码，使用 CommonsChunkPlugin 插件来防止多个入口中代码内使用相同文件的情况，做到去重与分离 chunk
- 配置 webpack.config.js
plugins: [
new webpack.optimaize.CommonsChunkPlugin({
name: 'common',
}),
],
2. 动态导入
- 使用 import() 语法（内部使用 Promise）来动态导入模块
- 首先，应当配置 webpack.config.js 的 output 选项
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
- 使用 chunkFilename 来决定非入口 chunk 的名称
- 可以使用 async 函数来搭配石笋 import()，前提是浏览器支持或使用了 babel 等的预处理器
四. 缓存
1. 输出文件名称
- 应当使用 [hash] 或 [chunkhash] 来配置 webpack.config.js 的 output.filename，以确保当文件内容变化后，防止浏览器缓存请求旧的文件而发现不了变化
2. 提取模板
- 使用 CommonsChunkPlugin 可以将 webpack 的样板（boilerplate）和 manifest 提取到单独的包中
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
}),
],
3. 提取 vendor
- 将第三方库（library）（例如 lodash 或 vue）提取到单独的 vendor chunk 文件中，因为它们很少像本地源码一样频繁修改，利用客户端的缓存，减少向服务器获取资源
- 使用一个新的 entry（入口）来配置，并额外配置一个 CommonsChunkPlugin 实例来实现
module.exports = {
entry: {
main: './src/index.js',
vendor: ['lodash'],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
}),
],
};
- 这里引入 runtime 的目的是说明 CommonsChunkPlugin 的 'vendor' 实例必须在 'runtime' 实例之前引入
4. 模块标识符
- 每个 module.id 会基于默认的解析顺序进行增量，也就是说，当解析顺序发生变化，ID 也会随之改变
- main bundle 会随着自身的新增内容的修改，而发生变化
- vendor bundle 会随着自身的 module.id 的修改，而发生变化
- runtime bundle 会因为当前包含一个新模块的引用，而发生变化
- 使用 HashedModuleIdsPlugin 插件在生产环境上
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
}),
],
网友评论