webpack提取公共程式碼
阿新 • • 發佈：2019-01-24
今天學了webpack的提取公共程式碼。記錄一下：
為什麼要提取公共程式碼，簡單來說，就是減少程式碼冗餘，提高載入速度。
這裡要用到兩個外掛：
- commonChunkPlugin
- webpack.optimize.commonsChunkPlugin
- 配置：plugins：[new webpack.optimize.commonsChunkPlugin(option)]
- option裡面是一個json，配置如下
- options.name: chunk的名稱
- options.filename: 公用程式碼打包後的名稱
- options.minChunks: 可以是數字、函式、特殊字元
- options.chunks: 提取程式碼範圍
- options.children
- options.deepChildren
- options.asyne
使用場景：單頁面應用，單頁面應用+第三方依賴，多頁面應用+第三方以來+程式碼生成
繼續建立檔案，且npm init初始化
pageA 依賴subPageA，subpageB，lodash
import'./moduleA'exportdefault'subpageA';
subpageB也依賴moduleA
importwebpack.config.js配置如下：
varwebpack=require('webpack');varpath=require('path');
module.exports= {entry: {pageA:'./src/pageA' },output: {path:path.resolve(__dirname, 'dist'),filename:'[name].bundle.js' },plugins: [newwebpack.optimize.CommonsChunkPlugin({name:'common'
命令列輸入webpack打包。
這時候，就會生成檔案如下：
這時候公共程式碼就被打包了。
可是針對多entry單頁面是不能打包的，在src中新增加一個pageB
程式碼如下;
import'./subpageA';import'./subPageB';import*as_from'lodash';exportdefault'pageB';
webpack.config.js程式碼如下
varwebpack=require('webpack');varpath=require('path');module.exports= {entry: {pageA:'./src/pageA',pageB:'./src/pageB',vender: ['lodash'] },output: {path:path.resolve(__dirname, 'dist'),filename:'[name].bundle.js',chunkFilename:'[name].chunk.js' },plugins: [newwebpack.optimize.CommonsChunkPlugin({name:'common',minChunks:2,// 選擇提取moduleA和moduleB的公共程式碼chunks: ['moduleA', 'moduleB'] }),newwebpack.optimize.CommonsChunkPlugin({name: ['vender', 'mainfest'],minChunks:Infinity }) ]}
這樣配置，就可以把第三方的lodash、公共程式碼都提取了。
打包結果如下：
到此，結束。