Webpack Vue瘦身，感受快到飛起的加載速度！技术頭條網

Webpack Vue瘦身，感受快到飛起的加載速度！

癥結

在利用webpack腳手架搭建vue項目後，往往最終打包的.js和.css文件過於龐大，造成首次加載的時候白屏時間過長，影響用戶體驗，下圖為未經任何優化直接npm run build之後的情況：

其中vendor.js文件高達1.16MB，平均白屏時間超過10秒。

解決方案

使用CDN剝離JS文件，讓他們獨立加載：

找出那些巨頭JS引用，如本例中的：Vue、Vue-Router、Element-UI、Quill等。
訪問https://www.bootcdn.cn/，找到這些文件的CDN引用

（當然你也可以選擇其他CDN網站，本例使用bootcdn.cn）

3. 修改項目根目錄下的 index.html

<code>




<link>

/<code>

4.修改 /build/webpack.base.conf.js 文件

<code>module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js' 

  },
// 在這個位置添加externals設置：
  externals: { 
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT', //注意element-ui的引用時純大寫
    'vue-quill-editor': 'VueQuillEditor',
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },/<code>

回到Vue源文件裡面，刪除關於Vue、Vue-Router、element-ui相關的import和Use：

<code>//import ElementUI from 'element-ui'
//import Vue from 'vue'
//import Router from 'vue-router'
//Vue.use(ElementUI)
//Vue.use(Router)
//Vue.use(VueQuillEditor)/<code>

將這些代碼通通註釋掉，因為在externals裡面已經做過聲明瞭，如果在Vue文件裡再聲明一次，將會報重複引用的錯誤。

完成後，讓我們再執行一次npm run build看看效果，發現果然大大地瘦了一次身，如圖：

vendor.js從1.2M瞬間減肥減到了109K

開啟zip壓縮模式，進一步瘦身

找到：/config/index.js，將productionGzip改為true

<code>    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],/<code>

檢查服務器端有沒有打開gzip，這裡以nginx為例，檢查nginx.conf文件：

<code>gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;/<code>