共计 4893 个字符，预计需要花费 13 分钟才能阅读完成。
作者：余韵之
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 --reportprefetching && 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、简书、开源中国、博客园 关注咱们。
