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、公共程式碼都提取了。
打包結果如下:
到此,結束。