vue實現的多頁面項目如何優化打包

時間 2020-07-20

標籤 vue 實現頁面項目如何優化打包简体版

原文原文鏈接

遇到的問題

在多頁面框架打包的過程當中會，隨着業務的增長頁面愈來愈多，使用的三方包也會愈來愈多，但並非全部頁面都會使用到三方插件，使用webpack打包會讓全部的三方包打包到一塊兒，會致使vendor.js(三方包打包後的文件)愈來愈大，即便沒使用過三方插件的頁面也會引入，頁面加載會愈來愈慢.css

如何優化

使用cdn引入，這種就每次新建一個頁面的時候手動經過cdn的方式引入，可是並非特別好的方式，還須要手動加入.
就是使用splitChunks分割三方包，將三方包單獨打包出來，根據頁面的依賴狀況自動注入，可是這種狀況分離的三方包並不會自動注入到對應的頁面中去,因此就寫了個自動注入的插件，原理就是在html頁面生成以後，根據頁面所依賴的chunks找到對應的靜態資源，而後將獲得的靜態資源注入到頁面中去。

自定義webpack插件

webpack 就像一條生產線，要通過一系列處理流程後才能將源文件轉換成輸出結果。這條生產線上的每一個處理流程的職責都是單一的，多個流程之間有存在依賴關係，只有完成當前處理後才能交給下一個流程去處理。插件就像是一個插入到生產線中的一個功能，在特定的時機對生產線上的資源作處理。webpack 經過 Tapable 來組織這條複雜的生產線。 webpack 在運行過程當中會廣播事件，插件只須要監聽它所關心的事件，就能加入到這條生產線中，去改變生產線的運做。

webpack自己引入的有tapable插件來管理構建流程，在編譯的時候會觸發tapalbe的鉤子事件，咱們編寫一個webpack插件就是找到對應的鉤子，而後寫入本身的業務，就是在鉤子上註冊本身的事件，和發佈訂閱模式是同樣的，當webpack構建時插件註冊的事件就會在鉤子觸發的時候執行。html

每一個 Webpack 插件都須要向外暴露一個 apply(compiler) 方法，在compiler上找到對應的鉤子寫入本身的業務處理。
目前這個插件處理的就是在生成了html頁面以後把頁面對應的js和css插入到html代碼中,所以這個插件是依賴於html-webpack-plugin的，他會向complation中再注入一個鉤子htmlWebpackPluginAfterHtmlProcessing當該鉤子觸發時，已經生成了一個html頁面vue

compiler.hooks.compilation.tap(
    this.constructor.name,
    compilation => {
      let hook = compilation.hooks.htmlWebpackPluginAfterHtmlProcessing;

      hook.tapAsync(
          this.constructor.name,
          (htmlPluginData, callback) => {
            try {
              // 當htmlWebpackPluginAfterHtmlProcessing鉤子觸發後會調用addLinks方法，傳入compilation和當前當html頁面信息
              callback(null, this.addLinks(compilation, htmlPluginData));
            } catch (error) {
              callback(error);
            }
          }
      );
    }
);

// 將頁面所依賴的js和css注入到頁面中
addLinks(compilation, htmlPluginData){
  // 獲取當前頁面所依賴的chunk
  const extractedChunks = extractChunks({
    compilation,
    optionsInclude: Object.keys(htmlPluginData.assets.chunks),
  });

  ...
  // 獲取全部chunks的files
  const allFiles = extractedChunks.reduce((accumulated, chunk) => {
    return accumulated.concat(chunk.files);
  }, []);

  // 這一步是將根據allFiles處理後的連接注入到html頁面
  htmlPluginData.html = insertLinksIntoHtml({
    links,
    html: htmlPluginData.html,
  });

  return htmlPluginData;
}

具體例子以下:node

// vue.config.js
const { resolve } = require('path')
const getEntries = require('./build/getEntries')
const WebpackBundleAnalyzer = require('webpack-bundle-analyzer')
const AutoInjectPlugin = require('auto-inject-plugin')
const pages = getEntries(resolve(__dirname, 'src/features/*/index.js'))
module.exports = {
  pages,
  productionSourceMap: false,
  assetsDir: 'static',
  publicPath: '/',
  chainWebpack: config => {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
    if(process.env.NODE_ENV === 'production'){
      // 分離第三方包
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          elementUI: {
            name: 'chunk-elementUI',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
          },
          swiper: {
            name: 'chunk-swiper',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?swiper(.*)/,
          }
        }
      })
      // 將依賴自動注入到對應頁面中
      config.plugin('AutoInjectPlugin').use(AutoInjectPlugin)
      config.optimization.runtimeChunk({name: 'manifest'})
    }

    if(process.env.npm_config_report){
      config.plugin('analyzer').use(WebpackBundleAnalyzer.BundleAnalyzerPlugin)
    }
    config
      .plugin('copy')
      .tap(args => {
        const { toType } = args[0][0]
        args[0] = []
        args[0].push({
          from: resolve(__dirname, 'public'),
          to: resolve(__dirname, 'dist/static/js'),
          toType
        })
        return args
      })
  }
}

抽離第三方包後的先後對比:webpack

抽離前
git

抽離後
github

使用自動注入插件先後生成的html頁面:
使用前：web

<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>Document</title>
  <link href=/bk_static/css/chunk-elementUI.ad4ace96.css rel=preload as=style>
  <link href=/bk_static/css/home.340fe3f2.css rel=preload as=style>
  <link href=/bk_static/js/chunk-elementUI.1ea80d29.js rel=preload as=script>
  <link href=/bk_static/js/chunk-libs.89fd9e1d.js rel=preload as=script>
  <link href=/bk_static/js/home.12708c2b.js rel=preload as=script>
  <link href=/bk_static/js/manifest.1dcac3f8.js rel=preload as=script>
  <link href=/bk_static/css/home.340fe3f2.css rel=stylesheet>
</head>

<body>
  <div id=root></div>
  <script src=/bk_static/js/home.12708c2b.js></script>
</body>

</html>

所依賴的代碼並未自動引入進來npm

使用後：element-ui

<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>Document</title>
  <link href=/bk_static/css/chunk-elementUI.ad4ace96.css rel=preload as=style>
  <link href=/bk_static/css/home.340fe3f2.css rel=preload as=style>
  <link href=/bk_static/js/chunk-elementUI.1ea80d29.js rel=preload as=script>
  <link href=/bk_static/js/chunk-libs.89fd9e1d.js rel=preload as=script>
  <link href=/bk_static/js/home.aa83744c.js rel=preload as=script>
  <link href=/bk_static/js/manifest.1dcac3f8.js rel=preload as=script>
  <link href=/bk_static/css/home.340fe3f2.css rel=stylesheet>
  <link href="/bk_static/css/chunk-elementUI.ad4ace96.css" rel=stylesheet>
</head>

<body>
  <div id=root></div>
  <script src=/bk_static/js/home.aa83744c.js></script>
  <script src=/bk_static/js/chunk-elementUI.1ea80d29.js></script>
  <script src=/bk_static/js/chunk-libs.89fd9e1d.js></script>
  <script src=/bk_static/js/manifest.1dcac3f8.js></script>
</body>

</html>

所依賴的代碼已經自動注入html頁面中.

插件地址：auto-inject-plugin

Demo地址: vue-multipage