webpack.vue.js 只是用来打包生成 [name]_dd.js 文件和 manifest.json文件的，是不需要参与到业务代码打包的，因为只会在每一次修改了需要生成dll文件的时间才会执行一次，否则不需要参与到打包
在webpack.base.js中进行插件的配置
使用DllReferencePlugin指定manifest文件的位置即可
new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, '../dist/manifest.json'), })由于[name]_dll文件生成之后，并没有动态的引入进去，所以需要一个插件可以动态的将生成的dll文件引入
安装add-asset-html-webpack-plugin
npm i -D add-asset-html-webpack-plugin配置插件自动添加script标签到HTML中，需要注意的是，必须在HtmlWebpackPlugin后面引入，因为HtmlWebpackPlugin是生产一个html文件，AddAssetHtmlWebpackPlugin是在已有的html中注入一个script，否则会被覆盖
new AddAssetHtmlWebpackPlugin({ filepath: path.resolve(__dirname, '../dist/vue_dll.js') }) 7.浏览器缓存在做了众多代码分离的优化后，其目的是为了更好的利用浏览器缓存，达到提高访问速度的效果，所以构建项目时做代码分割是必须的，
例如将固定的第三方模板抽离，下次修改了业务代码，重新发布上线不重启服务器，用户再次访问服务器就不需要再次加载第三方模板了
但是此时会遇到一个问题，如果再次打包上线不重启服务器，客户端会把以前的业务代码和第三方模块同时缓存，再次访问时依旧会访问缓存中的业务代码，所以会导致业务代码也无法更新
需要在output节点的filename中使用placeholder语法，根据代码内容生产文件名的hash，之后每次打包业务代码时，如果有改变，会生成新的hash作为文件名，浏览器就不会使用缓存了，而第三方模块不会重新打包生成新的名字，则会继续使用缓存
output: { path: path.join(__dirname, '..','./dist'), filename:'[name].[contenthash:8].bundle.js', publicPath: 'http://www.likecs.com/' }, 8.打包分析项目构建完成后，需要通过一些工具对打包后的bundle进行分析，通过分析可以得到一些有用的信息
使用 --profile --josn 参数，以json格式来输出打包后的结果到某个指定的文件中
webpack --profile --json > stats.json将stats.json文件放到工具中进行分析
官方工具: analyse
webpack-chart：webpack stats 可交互饼图。
webpack-visualizer：可视化并分析你的 bundle，检查哪些模块占用空间，哪些可能是重复使用的。
webpack-bundle-analyzer：一个 plugin 和 CLI 工具，它将 bundle 内容展示为便捷的、交互式、可缩放的树状图形式。是一个插件，可以以插件安装到项目中
安装
npm i -D webpack-bundle-analyzer使用, 配置在一个单独的文件中 webpack.analyse.js (直接拷贝的web pack.prod.js,仅仅是多了此插件的使用)
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }webpack bundle optimize helper：此工具会分析你的 bundle，并为你提供可操作的改进措施建议，以减少 bundle 体积大小。
9.prefetching && preloading在优化访问性能时，除了利用浏览器缓存之外，还需要涉及到一个性能指标: 覆盖率(coverage rate)
可以在chrome浏览器的控制台中按 ctrl + shift + p，查找 coverage，打开覆盖率面板，开始录制后刷新页面，即可看到每个js文件的覆盖率，以及总的覆盖率
想提高覆盖率，需要尽可能多的使用impor动态导入，也就是懒加载的功能，将一切能使用懒加载的地方都是用懒加载，这样可以大大的提高覆盖率
但是有时候使用懒加载会影响用户体验，所以可以在使用懒加载的时候使用魔法注释(Magic Comments): prefetching，是指在首页资源加载完毕后，空闲的时候，将动态导入的资源加载进来，这样既可以提高首屏加载速度，也可以解决懒加载可能会影响用户体验的问题
往期文章列表
必懂的webpack基础
必懂的webpack高级配置
GraphQL入门
GraphQL 客户端开发