介紹?webpack-bundle-analyzer 這個(gè)插件來分析SPA應(yīng)用。
使用
npm install --save-dev webpack-bundle-analyzer
在webpack的plugins中配置： new BundleAnalyzerPlugin()
在package.json 中增加：?"analyz":?"NODE_ENV=production npm_config_report=true npm run build"
npm run?analyz? 后會自動打開?http://127.0.0.1:8888/ 砌溺，視圖如下：
vendor包屬于工程基礎(chǔ)包籍嘹，里面包含了node_modules下的依賴模塊季眷，因?yàn)檫@些依賴是比較穩(wěn)定的，所以可以配合ETag做http層的緩存。
use-repeat包屬于業(yè)務(wù)基礎(chǔ)包甜癞，里面包含業(yè)務(wù)場景常用到依賴和工具纤垂，打入此包的前提：在應(yīng)用中重復(fù)使用大于等于3次矾策。
為什么需要分出 工程基礎(chǔ)包 和 業(yè)務(wù)基礎(chǔ)包？
工程基礎(chǔ)包是整個(gè)工程常用的node_modules的依賴洒忧，這里的內(nèi)容不會經(jīng)常變動蝴韭，所以單獨(dú)抽出來并且搭配ETag來實(shí)現(xiàn)緩存是常用的spa 優(yōu)化方案。
業(yè)務(wù)基礎(chǔ)包大部分不是node_modules的模塊熙侍，例如我們在common中存放的一些基礎(chǔ)組件榄鉴，其次是一些三方的組件庫（這些是在node_modules中的，但是因?yàn)榻?jīng)常變動所以不適宜放在vendor中）蛉抓。如果業(yè)務(wù)基礎(chǔ)包不進(jìn)行提取會導(dǎo)致單chunk包重復(fù)打包相同模塊庆尘，也增加了單chunk包的體積。
對應(yīng)的webpack配置如下：
????// 工程基礎(chǔ)包
? ? ? new webpack.optimize.CommonsChunkPlugin({
? ? ? ? ????name: 'vendor',
? ? ? ????? minChunks: function (module, count) {
? ? ? ? ? return (module.resource && /\.js$/.test(module.resource) && ????????????????????module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)
? ? ? ? }
? ? ? })
????// 業(yè)務(wù)基礎(chǔ)包
? ? ? new webpack
? ? ? .optimize
? ? ? .CommonsChunkPlugin({
? ? ? ? ????async: 'use-repeat',
? ? ? ? ????minChunks: (module, count) => (count >=3)
? ? ? })
到此還不算結(jié)束巷送，因?yàn)槿绻浜螮Tag做緩存驶忌，需要保證打出來包hash不能改變，下面是常見的output 配置：
output: {
? ? path: path.join(__dirname, '../dist'),
? ? filename: '[name]-[chunkhash].js',
? ? chunkFilename: '[name]-[chunkhash].chunk.js'
? }
hash 是 build-specific ，即每次編譯都不同——適用于開發(fā)階段
chunkhash 是 chunk-specific付魔，是根據(jù)每個(gè) chunk 的內(nèi)容計(jì)算出的 hash——適用于生產(chǎn)
使用chunkhash就保險(xiǎn)了嗎聊品？
這里涉及到三個(gè)問題：1.webpack運(yùn)行文件 2.module id? 3.chunk id ， 解決方案如下：
????// 將webpack運(yùn)行文件抽離出來几苍，不然每次打包運(yùn)營文件的hash都會改變
? new webpack.optimize.CommonsChunkPlugin({
? ? ?name: 'runtime'
? })
// 固定module id
?new webpack.HashedModuleIdsPlugin({
? ? ? hashFunction: 'md5',
? ? ? hashDigest: 'hex',
? ? ? hashDigestLength: 8
?})
// 固定chunk id
new webpack.NamedChunksPlugin((chunk) => {
? ? ? ? // 解決異步模塊打包的問題
? ? ? ? if (chunk.name) {
? ? ? ? ? return chunk.name;
? ? ? ? }
? ? ? ? return chunk.modules.map(m => path.relative(m.context, m.request)).join("_");
})
相關(guān)文章：https://zhuanlan.zhihu.com/p/34110535
最后不得不吐槽下 簡書 的編輯功能真的好難用翻屈，不是不想多寫一些思考，是真的難用∑薨樱現(xiàn)在基本每天的思考和總結(jié)都會放到語雀上伸眶，簡書是想起來回來更新一下。
