遇到的问题
在多页面框架打包的过程中会，随着业务的减少页面越来越多，应用的三方包也会越来越多，但并不是所有页面都会应用到三方插件，应用webpack打包会让所有的三方包打包到一起，会导致vendor.js(三方包打包后的文件)越来越大，即便没应用过三方插件的页面也会引入，页面加载会越来越慢.
如何优化
- 应用cdn引入，这种就每次新建一个页面的时候手动通过cdn的形式引入，然而并不是特地好的形式，还须要手动退出.
- 就是应用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.jsconst { 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