關(guān)于vue-cli 3配置打包優(yōu)化要點(diǎn)（推薦）

更新時(shí)間：2019年04月22日 09:41:43 作者：Echi灬丨無(wú)痕

這篇文章主要介紹了vue-cli 3配置打包優(yōu)化要點(diǎn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

配置路由懶加載,封裝了異步組件引入的方法,接收一個(gè)地址做參數(shù)

/**
 * 返回異步組件
 * @tips 請(qǐng)注意頁(yè)面只能掛載在views文件下,非此路徑請(qǐng)勿使用
 */
const AsyncComponentHook = (path: String): Function => (): any => {
  // 通過 webpack 的內(nèi)聯(lián)注釋,設(shè)置模塊名
  let component = import(/* webpackChunkName: "view-[request]" */ `@/views/${path}.vue`);
  component.catch((e) => {
    console.error(e);
  });
  return component;
};

配置代碼壓縮

 // 安裝
  npm install uglifyjs-webpack-plugin

  // 在vue.config.js文件中添加配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產(chǎn)環(huán)境修改配置...
      config.plugins.push(
        //生產(chǎn)環(huán)境自動(dòng)刪除console
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      );
    }
  },

配置引用別名

設(shè)置插件的按需引入,本文使用的是element-ui，點(diǎn)擊查看詳情

經(jīng)過一些基礎(chǔ)的配置后,我們來(lái)看下目前打包后的效果。

從下圖可以看到,打包出來(lái)后最大的包有1.33M。然后再看下請(qǐng)求,哇,217個(gè)請(qǐng)求、首頁(yè)下載需要3.2M。

好吧，開始折騰

1. 優(yōu)化scss配置文件的引入

我們?cè)诖罱?xiàng)目的過程中經(jīng)常性的會(huì)將一些scss配置文件抽離出來(lái)，例如主題色等，然后在每個(gè)需要的組件中引入。這樣會(huì)顯得很繁瑣，我們可以借助sass-loader幫我們進(jìn)行預(yù)處理，

這樣我們就不用在每一個(gè)頁(yè)面都進(jìn)行引入樣式，就能直接引用。

例如我們的樣式文件目錄下有一個(gè)theme.scss，我們可以在vue.config.js中作如下處理

// vue.config.js 配置
module.exports = {
 css: {
  // css預(yù)設(shè)器配置項(xiàng)
  loaderOptions: {
    // pass options to sass-loader
    sass: {
      // 引入全局變量樣式,@使我們?cè)O(shè)置的別名,執(zhí)行src目錄
      data: `
        @import "@/stylePath/theme.scss";
      `
    }
  },
 },
}

通過以上配置,就可以在組件模板中注釋以下代碼

<style lang="scss">
  /* @import "@/stylePath/theme.scss"; */
</style>

2. 針對(duì)請(qǐng)求數(shù)進(jìn)行優(yōu)化

我們發(fā)現(xiàn)請(qǐng)求數(shù)增多是因?yàn)槲覀冺?yè)面預(yù)先渲染了其它組件，會(huì)在html頁(yè)面中插入像這樣的東西<link rel="prefetch">，這該怎么優(yōu)化呢？

首先我們先看下vue.config.js的官方文檔，點(diǎn)擊前往。
官方說明：是一種 resource hint，用來(lái)告訴瀏覽器在頁(yè)面加載完成后，利用空閑時(shí)間提前獲取用戶未來(lái)可能會(huì)訪問的內(nèi)容。

所以我們添加如下配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
  // 移除 prefetch 插件
  config.plugins.delete('prefetch')
  // 移除 preload 插件
  config.plugins.delete('preload');
 }
}

3. 公用代碼提取，使用cdn加載

對(duì)于vue, vuex, vue-router，axios等我們可以利用wenpack的externals參數(shù)來(lái)配置，這里我們?cè)O(shè)定只需要在生產(chǎn)環(huán)境中才需要使用:

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
  ]
}
module.exports = {
  chainWebpack: config => {
    // 生產(chǎn)環(huán)境配置
    if (isProduction) {
      // 生產(chǎn)環(huán)境注入cdn
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn;
          return args;
        });
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
      }
    }
  },
}

接著修改html文件，添加注入代碼

<!DOCTYPE html>
<html lang="zh">

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
 <% } %>
 <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
 <% } %>
</head>

<body>
 <noscript>
  <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 <% } %>
</body>

</html>

然后打包重啟，我們?cè)賮?lái)看下目前的變化。

嗯，真香~從下圖可以看到,打包出來(lái)后最大的包文件只有775kb。然后再看下請(qǐng)求,哇,43個(gè)請(qǐng)求、首頁(yè)下載只需要1.4M。

可以看出，我們這一系列的操作后請(qǐng)求數(shù)減少了174個(gè)，首頁(yè)渲染減少了1.8m,真是可喜可賀

最后，附上完整的vue-config.js文件

const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
  ]
}

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 基本路徑
  baseUrl: './',
  // 輸出文件目錄
  outputDir: 'dist',
  // 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。
  // assetsDir: "./",
  // 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑
  indexPath: './',
  // eslint-loader 是否在保存的時(shí)候檢查
  lintOnSave: true,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    config
      .entry('index')
      .add('babel-polyfill')
      .end();
    // 配置別名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@img", resolve("src/assets/images"))
      .set("@css", resolve("src/assets/styles/css"))
      .set("@scss", resolve("src/assets/styles/scss"));
    // 生產(chǎn)環(huán)境配置
    if (isProduction) {
      // 刪除預(yù)加載
      config.plugins.delete('preload');
      config.plugins.delete('prefetch');
      // 壓縮代碼
      config.optimization.minimize(true);
      // 分割代碼
      config.optimization.splitChunks({
        chunks: 'all'
      })
      // 生產(chǎn)環(huán)境注入cdn
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn;
          return args;
        });
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
      }
      // 為生產(chǎn)環(huán)境修改配置...
      config.plugins.push(
        //生產(chǎn)環(huán)境自動(dòng)刪除console
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      );
    } else {
      // 為開發(fā)環(huán)境修改配置...
    }
  },
  // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相關(guān)配置
  css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: true,
    // 開啟 CSS source maps?
    sourceMap: false,
    // css預(yù)設(shè)器配置項(xiàng)
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // 引入全局變量樣式
        data: `
          @import "@/stylePath/theme.scss;
        `
      }
    },
    // 啟用 CSS modules for all css / pre-processor files.
    modules: false,
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  devServer: {
    port: 8888, // 端口
    open: true, // 自動(dòng)開啟瀏覽器
    compress: false, // 開啟壓縮
    overlay: {
      warnings: true,
      errors: true
    }
  },
}

以上就是我針對(duì)打包后做的優(yōu)化處理，當(dāng)然還有其它優(yōu)化點(diǎn)，比如開啟gzip壓縮，不過這個(gè)需要后臺(tái)服務(wù)器支持，所以暫不配置。如果你還有其它優(yōu)化點(diǎn)，歡迎一起討論！

以上所述是小編給大家介紹的vue-cli 3配置打包優(yōu)化要點(diǎn)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: