一、项目说明
App.vue中2个组件，一个About.vue组件懒加载导入，一个Home.vue组件，正常引入。
二、html打包后分析
- 为你生成一个 HTML5 文件
- js注入，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle（js）
- css文件注入,假如你使用 MiniCssExtractPlugin插件(这个插件也是必须要了解的)将css文件是单独剥离出来，不放在html中的style标签内，它会自动将css链接注入到link标签中
index.html文件里：app节点
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
打包后，dist目录下生成index.html,里面插入了dist下的js和css。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义模板</title>
- <link rel="stylesheet" href="style.css">
</head>
<body>
- <div id="app"></div>
- <script type="text/javascript" src="app.min.js"></script>
</body>
</html>
Vue-Cli默认将打包后的内容放到dist目录下，HtmlWebpackPlugin生成的html5文件放到dist目录下，想要修改html5的打包后的目录，修改HtmlWebpackPlugin配置就是。
对应vue-cli里通过pages的filename属性可修改打包后的文件。
三、JS打包后分析
打包后的文件里有多个bundle，项目里是因为路由懒加载造成的，webapck分片，按需加载。
- app.***.js 是打包后的总的js文件，那些非懒加载的打包到了一起。
- chunk-vendor.***.js 打包node-modules
-
about.***.js 因为vue-router 路由懒加载缘故，不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，打包成单独的一个。--性能优化的方向之一。
ps：js下的map，是开启了sourceMap功能，为了方便调试，打包后的代码和源码的映射。
vue路由懒加载最优体验
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
基本语法：import(/* webpackChunkName: "chunk名称（用于代码分割）" */ "组件路径")
在动态import()代码处添加注释webpackChunkName告诉webpack打包后的chunk的名称（注释中的内容很重要，不能省掉），这里打包以后的name就是about。
指定chunk name ，打包后的名字清晰。
因为路由懒加载会将每个模块单独打包，有时我们需要将多个懒加载的的模块，打包成一个chunk，可以指定同一个chunk name 来实现。
vue-cli对js 的打包处理：
四、CSS打包后分析
Vue-Cli 的css.extract 中线上环境（即打包单独的css目录）使用了 MiniCssExtractPlugin插件，将CSS单独打包。
其他环境不使用MiniCssExtractPlugin，CSS以style标签形式和JS打包都一起。例如：
MiniCssExtractPlugin为每个包含 CSS 的 JS 文件（打包出来的）创建一个 CSS 文件。例如about..css 是about..js里使用的css。app..css是app.*.js里使用的cs.
vue-cli 源码对css的处理
| filename 与 chunkFilename | MiniCssExtractPlugin | |
|---|---|---|
注意：
Vue-Cli 默认下，开发环境不开启MiniCssExtractPlugin功能，线上环境开启。
详细说明：km.sankuai.com/page/651659…
