webpack打包之框架程式碼與業務程式碼拆分
阿新 • • 發佈:2019-01-26
why框架程式碼與業務程式碼要拆分
單獨打包類庫檔案原因:框架程式碼穩定性比較高,而業務程式碼更新迭代快,希望瀏覽器儘可能長的時間對框架程式碼進行快取來減少伺服器流量,讓使用者載入速度更快。
方法
在entry中設定框架程式碼放置的檔案
config.entry = {
app: path.join(__dirname, 'src/index.js'),
vendor: ['vue'] //這個entry會單獨打包
},
config.optimization = {
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
name: "vendor",
chunks: "initial",
minChunks: 2
}
}
}
}
以上至針對webpack4.0.0中的設定,在webpack4.0.0中將外掛webpack.optimize.CommonsChunkPlugin({name:’某個名字’})的使用方法改變了,這點要注意;改成了上述。
若在4中使用老方法,會報錯:Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
進行分離之後,可以看到打包出的檔案有多變化:
可以看到,分離前後,原先的出口mian.js被拆分成了兩個vendor.js和app.js。app.js中存放的才是我們的業務程式碼,比較起來小多了。我們還可以加上hash碼,優化瀏覽器的快取效果。