webpack vue熱加載編譯速度慢


問題描述: 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不支持變量方式,

該修改對於生產環境無影響,只在開發環境有問題

備注

http://zhihesj.com/?id=771


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM