作者：余韵之
LazyLoading 懒加载 Chunk是什么？
我们可以使用懒加载的方式引入模块，比如说当触发了某个条件，在通过import的方式引入模块。这样可以使得项目的性能会更加的好。
举个例子：
当我们点击页面的时候，才会去引入lodash模块，这里 import()返回的是promise
async function getComponent() {
const {default: _} = await import(/* webpackChunkName:"lodash" */'lodash')
const element = document.createElement('div')
element.innerHTML = _.join(['y', 'kk'], '-');
return element;
}
document.addEventListener('click', () => {
getComponent().then(element => {
document.body.appendChild(element)
})
})
同样的路由懒加载的意思，表示当我们监听到路由变化了，才会去引入对应的页面模块。
因此可以知道，Chunk是什么？打包生成几个JS文件，就是几个Chunk
Shimming
Shimming：在打包过程中，有时候需要对代码兼容。这种兼容不局限于浏览器高低版本。
举个例子
每个文件都是一个模块，每个模块都应该引入自己的依赖才能使用该依赖。
import $ from 'jquery'
export function setBackground(){
$('body').css('background','red')
}
但是这样的话，每个文件都要写一遍
import $ from 'jquery'
因此可以使用垫片的方式来自动配置
plugins:[
new webpack.ProvidePlugin({
$:'jquery',
_join:['lodash','join']
})
]
当我们配置了上述内容，那么意味着当运行代码的时候看到
- $这个符号就会自动去node_modules里引入jquery。他的原理就是自动帮我们添加了import的步骤。
- 看到_join就会自动找到 lodash里join的方法
于是我们可以直接这些一个文件模块使用
export function setBackground(){
$('body').css('background', _join(['green'], ''))
}
webpack与浏览器缓存（caching）
当我们打包生成了
index.html
main.js
vendors.js
客户端从服务端拿到了两个js文件，会保存在浏览器里。客户端刷新后浏览器会先从缓存里获取。
当开发修改了代码，重新打包，生成了上述三个同名文件时，用户刷新后仍然是原来的代码并没有更新。
这样如何解决呢？
1、打包文件添加contentHash
开发环境因为是热更新的，所以本地调试可以不添加，
生产环境在output里改为
output: {
filename: '[name].[contentHash].js',
chunkFilename: '[name].[contentHash].js'
}
contentHash 表示只要不改变源代码的内容，那么contentHash所产生的hash值是不会变的。如果代码是分割成不同的chunk，某个chunk没有修改，该chunk的文件名contentHash也不会修改
同时做了代码分割的参数最好也配置一下
optimization.splitChunks.cacheGroup.vendors.filename = 'vendors.[contentHash].js'
2、对老版本的兼容
可能老的版本即使不改内容，contentHash值也会改变，这个时候可以配置
optimization: {
runtimeChunk:{
name:'runtime'
}
}
新版本添加这个runtimeChunk也是没有问题的，此时打包会多出一个runtime.xxxxxxx.js文件
这是怎么回事呢？
因为在旧的webpack版本里main.js（业务逻辑） 和 vendors.js（第三方库） 之间是存在关联的，这部分的处理代码放在mainfest,虽然没有改变代码，但在旧版本的webpack里 mainfest 包和包之间的关系每次打包可能会变化，当我们配置了runtimeChunk的时候就把mainfest这块关系相关的代码抽离出来了放在runtime.js里
因此这样就解决了这个兼容老版本的问题。
对CSS代码分割
正常打包的话，会把CSS文件一起打包的main.js文件，如何进行CSS代码分割呢？
1、使用一个插件：mini-css-extract-plugin
但这个插件有一个缺点，目前不支持热更新，所以适合线上环境做打包
配置方式安装依赖
yarn add mini-css-extract-plugin
在生产环境的webpack.config.js配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{
rules:[
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}, {
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css", //index.html直接引入的文件
chunkFilename: "id.css" // 间接引用的文件
})
]
注意 如果此时使用了tree shaking 看看 package.json 里 sideEffects 配置。如果为false那么css代码是没有分割的。需要把css tree shaking排除在外。修改如下：
"sideEffects": [
"*.css"
],
2、接下来对合并的CSS代码压缩
安装依赖
yarn add optimize-css-assets-webpack-plugin -D
生产环境
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
optimization:{
minimizer:[new OptimizeCSSAssetsPlugin({})]
}
打包分析
生成webpack打包分析json
webpack --profile --json > stats.json --config ./build/webpack.dev.js
然后把生成的stats.json放入相关的分析网站就可以看到可视化的数据。当然也可以配置analyzer
安装依赖
npm install webpack-bundle-analyzer --save-dev
在webpack.config.js配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
...
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin({
// 可以是`server`，`static`或`disabled`。
// 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下，会生成带有报告的单个HTML文件。
// 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,
// 路径捆绑，将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`，`parsed`或者`gzip`中的一个。
// 有关更多信息，请参见“定义”一节。
defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
openAnalyzer: true,
// 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false,
// 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
statsFilename: 'stats.json',
// stats.toJson（）方法的选项。
// 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
// 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})
]
},
...
};
使用方式 在打包或者启动的时候加 --report
npm run serve --report
npm run build --report
prefetching && preloading
关注代码使用率：一开始不会执行的代码不要加载出来，而是当交互了再去加载。
webpack希望尽可能使用异步加载模快在第一次加载提高性能，而同步是第二次加载了增加缓存对性能的提升是有限的。
document.addEventListener('click', () => {
import('./click.js').then(({default:func}) => {
func()
})
})
注意 但这样会存在一个问题，就是当用户点击交互了才下载代码可能会有一点小小的延迟，如何解决这个问题？
解决方案就是 ： prefetching/preloading
- prefetching 会等到核心先展示的代码加载完毕了，等宽带空闲再继续下载。
只需要在代码添加如下内容即可：
document.addEventListener('click', () => {
import(/* webpackPrefetch:true */'./click.js').then(({default:func}) => {
func()
})
})
当用户点击了，仍然会下载click.js文件，但是使用的时间会非常短，因为之前已经下载过了有了缓存了。
- preloading 会和主的代码同时下载。
document.addEventListener('click', () => {
import(/* webpackPreload:true */'./click.js').then(({default:func}) => {
func()
})
})
因此性能优化最好去考虑代码的使用率更高。
对 Electron 感兴趣？请关注我们的开源项目 Electron Playground，带你极速上手 Electron。
我们每周五会精选一些有意思的文章和消息和大家分享，来掘金关注我们的 晓前端周刊。
我们是好未来 · 晓黑板前端技术团队。
我们会经常与大家分享最新最酷的行业技术知识。
欢迎来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注我们。
