問題描述: vue2.x + iview項目隨着文件越來越多打包速度越來越慢
76% basic chunk optimization RemoveParentModulesPlugin
解決方法:
安裝babel-plugin-dynamic-import-node插件
npm install babel-plugin-dynamic-import-node --save-dev
配置 .babelrc
文件
{
presets: [
'@vue/app'
],
env: {
development: {
plugins: ['dynamic-import-node']
}
}
}
衍生問題:
問題1 安裝了插件后,打包速度提高了,但是打dist包測試的時候發現漏了好多包,造成了無法發版。
解決發版問題
打版時候把 .babelrc
文件中下面的代碼注釋掉即可,打完包在恢復過來,這樣打包也可以,熱更新又快。
env: {
development: {
plugins: ['dynamic-import-node']
}
}
問題2 安裝了插件后,打包報錯 Critical dependency: the request of a dependency is an expression
根據提示可以找到主要造成這個問題的代碼是以下這段:
export const loadView = (view) => { // 路由懶加載
return () => import(`@/views/${view}`)
}
全局搜索node_modules我們可以看到這個問題是由webpack 的 lib/dependencies/ContextDependencyHelpers.js 第224行報出的警告;
然后在官方的issues中也能找到相關問題;
不過官方似乎並沒有給出解決方案(也可能是我沒有找到),也許是官方並不贊同import(@/views/${view}
)這種引入方式;
我們也可以想辦法換個方式引入,例如:
export const loadView = (view) => { // 路由懶加載
return () => Promise.resolve(require(`@/views/${view}`).default)
}
這樣既能保證組件的異步載入,也不會被webpack報異常,terminal看起來舒服多了;
webpack 版本問題,webpack4中動態import不支持變量方式,
該修改對於生產環境無影響,只在開發環境有問題