這篇文章主要為大家展示了“vue-cli 3配置打包優(yōu)化的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue-cli 3配置打包優(yōu)化的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)建站于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元汪清做網(wǎng)站,已為上家服務(wù),為汪清各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

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

/**
 * 返回異步組件
 * @tips 請(qǐng)注意頁面只能掛載在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ǔ)的配置后,我們來看下目前打包后的效果。

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

好吧，開始折騰

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

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

這樣我們就不用在每一個(gè)頁面都進(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";
      `
    }
  },
 },
}

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

  /* @import "@/stylePath/theme.scss"; */

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

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

首先我們先看下vue.config.js的官方文檔，點(diǎn)擊前往。
官方說明：  是一種 resource hint，用來告訴瀏覽器在頁面加載完成后，利用空閑時(shí)間提前獲取用戶未來可能會(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ù)來配置，這里我們?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文件，添加注入代碼

 
 
 
 
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  " rel="external nofollow" rel="external nofollow" rel="preload" as="style">
  " rel="external nofollow" rel="external nofollow" rel="stylesheet">
 <% } %>
 
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  " rel="external nofollow" rel="preload" as="script">
 <% } %>