关于vue.js:vue实现的多页面项目如何优化打包

13次阅读

共计 4717 个字符，预计需要花费 12 分钟才能阅读完成。

遇到的问题

在多页面框架打包的过程中会，随着业务的减少页面越来越多，应用的三方包也会越来越多，但并不是所有页面都会应用到三方插件，应用 webpack 打包会让所有的三方包打包到一起，会导致 vendor.js(三方包打包后的文件)越来越大，即便没应用过三方插件的页面也会引入，页面加载会越来越慢.

如何优化

  1. 应用 cdn 引入，这种就每次新建一个页面的时候手动通过 cdn 的形式引入，然而并不是特地好的形式，还须要手动退出.
  2. 就是应用 splitChunks 宰割三方包，将三方包独自打包进去，依据页面的依赖状况主动注入，然而这种状况拆散的三方包并不会主动注入到对应的页面中去, 所以就写了个主动注入的插件，原理就是在 html 页面生成之后，依据页面所依赖的 chunks 找到对应的动态资源，而后将失去的动态资源注入到页面中去。

自定义 webpack 插件

webpack 就像一条生产线，要通过一系列解决流程后能力将源文件转换成输入后果。这条生产线上的每个解决流程的职责都是繁多的，多个流程之间有存在依赖关系，只有实现以后解决后能力交给下一个流程去解决。插件就像是一个插入到生产线中的一个性能，在特定的机会对生产线上的资源做解决。webpack 通过 Tapable 来组织这条简单的生产线。webpack 在运行过程中会播送事件，插件只须要监听它所关怀的事件，就能退出到这条生产线中，去扭转生产线的运作。

webpack 自身引入的有 tapable 插件来治理构建流程，在编译的时候会触发 tapalbe 的钩子事件，咱们编写一个 webpack 插件就是找到对应的钩子，而后写入本人的业务，就是在钩子上注册本人的事件，和公布订阅模式是一样的，当 webpack 构建时插件注册的事件就会在钩子触发的时候执行。

每个 Webpack 插件都须要向外裸露一个 apply(compiler) 办法，在 compiler 上找到对应的钩子写入本人的业务解决。
目前这个插件解决的就是在生成了 html 页面之后把页面对应的 js 和 css 插入到 html 代码中, 因而这个插件是依赖于 html-webpack-plugin 的，他会向 complation 中再注入一个钩子 htmlWebpackPluginAfterHtmlProcessing 当该钩子触发时，曾经生成了一个 html 页面

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;
}

具体例子如下:

// 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
      })
  }
}

抽离第三方包后的前后比照:

抽离前

抽离后

应用主动注入插件前后生成的 html 页面:
应用前：

<!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>

所依赖的代码并未主动引入进来

应用后：

<!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

正文完
vue.js
发表至： vue.js
2020-07-19
 0
关于vue.js:Vueprops
关于vue.js:vue-源码解析323模板编译和组件化
关于vue.js:vueVue中的指令
关于vue.js:vue面试经常会问的那些题

站内搜索

-「」