const path = require('path');
const webpack = require('webpakc')
module.exports = ,
output:,
plugins:[
new webpack.dllplugin(),
// 混淆壓縮
new webpack.optimize.uglifyjsplugin()
]}
第三步: 命令列打包: webpack –config build/webpack.dll.config.js
第四部: 在webpack.prod.conf.js中加入如下**:
plugin:[
new webpack.dllreferenceplugin(),
new webpack.dllreferenceplugin()
....]
方法二: 並行進行**壓縮混淆
外掛程式: uglifyjsplugin 壓縮混淆**
設定:paraller cache
// 修改webpack.prod.conf.js
plugins:[
new uglifyjsplugin(
},sourcemap: false,
parallel: true , // 並行處理打包檔案
cache: true, // 使用快取
})]
// 修改webpack.prod.conf
plugins:[
id:'vue',
loaders:[
]})
//修改webpack.base.conf.js
,
四: babel-loader
開啟快取: options.cachedirectory
include/exclude: 規定打包的範圍
//修改webpack.base.conf.js
,// 修改include 減少babel-loader的處理範圍
include: [resolve('src')]
//resolve('test'), 開發環境使用
//resolve('node_modules/webpack-dev-server/client') 開發環境使用
其他因素:
減少resolve
devtool:去除sourcemap
cache-loader, // 將loader處理結果快取下來
公升級node,
公升級webpack,
Webpack 打包優化之速度篇
在前文 webpack 打包優化之體積篇中,對如何減小webpack打包體積,做了些 當然,那些法子對於打包速度的提公升,也是大有裨益。然而,打包速度之於開發體驗和及時構建,相當重要 所以有必要對其做更為深入的研究,以便完善工作流,這就是本文存在的緣由。在使用實際專案開發中,為了提公升開發效率,很明...
提高webpack打包速度
隨時公升級webpack及其相關管理工具的版本,包括npm,node,yarn等。每個版本都會有優化,同時webpack建立在node環境之上,node的公升級也會有一定的效率提公升 同樣安裝較新的npm和yarn工具,可以提高相互依賴的模組間的解析速度 loader的解析和處理較為耗時的,有可能的...
webpack打包優化
tree shaking 使用import匯入的包,在生產環境下自動去除包內沒有引用的 這是webpack打包自帶的優化 import是es6引入規範 所以記得要裝babel require是common.js引入規範 scope hosting 在bundle.js檔案 module a.js e...