使用路由懒加载分包
{ path: "路由路径", component: () => import(
/* webpackChunkName: "chunk名称 用于代码分割 " */ "../components/xxxx"
) }
打包后的JS按照你的模块划分去拆分，但是包体积并没有减少，下面我们使用插件来具体分析一下。
打包分析可以使用webpack-bundle-analyzer插件来实现
// webpack.config.js
const BundleAnalyzerPulgins = require('webpack-bundel-analyzer')
module.exports ={
...
plugins: [new BundleAnalyzerPulgins()],
...
}
这是运行打包命令后的分析页面
优化
观察上面的图你可以发现vue，vuex，vue-router都占了很多的体积，那我们是不是可以使用外部链接的方法引入呢？显然是可以的。这样做的好处是可以减少包体积还可以共享给其他项目使用，使用cnd缓存加速会更加快速。这里只是列举几个例子其实不止是vue，vuex，vue-router可以使用，其他很大的包也可以使用此方法可以有效减少包体积。
<!-- index.js 模板文件 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/xxx.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>xxxx</title>
</head>
<body>
<div id="root"></div>
<!-- 像正常远程js一样引入 一般是自己公司去搭建cdn，可以使用命令来区分环境 -->
<% if (process.env.NODE_ENV === 'production') { %>
<script type="module" src="https://cdn.xxxx/vue"></script>
<% }
%>
</body>
</html>
// webpack.config.js
const BundleAnalyzerPulgins = require('webpack-bundel-analyzer')
module.exports ={
...
// 这里可以写那些是不需要打包的
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter'
}
...
}
优化后的样子
继续优化
这时我们发现core-js也占了很多地方，它主要是为了支持低版本浏览器代码转化会额外自己实现一些方法，其实我们可以通过打2个包来优化打包命令后面加上 --modern。让高版本浏览器使用没有额外添加方法的包低版本继续使用加了兼容代码的包，就可以让让高版本浏览器的包减少一些体积。那么如何让浏览器区分出使用哪个包呢？我们可以给script标签加上type='module'和自定义标记nomodule，因为type='module'和nomodule都是es6认识的（意味着是高版本浏览器），并且标记了nomodule就不会去加载资源，但是低版本浏览器它并不认识type='module'和自定义标记nomodule，这时候type='module'会直接忽略nomodule只会当做一个普通自定义标记来使用，所以就加载了不是type='module'的script标签来实现了区分高低版本浏览器。
