本文介绍了webpack打包优化的解决方案，包括使用插件查看项目包体积、外部扩展公共依赖以及DLL方式。通过插件分析打包情况，将大体积、不常更新的依赖通过CDN引入，减少首次加载的资源。最后，详细讲解了DLL方式配置，以进一步提高构建效率。
bug问题：
单页应用首次进入项目会获取一部分数据，之后将JS包分片，走到那块再去加载那块的JS。 这样跨页面重复的JS，CSS不必再去获取，跨页面就不会出现进度条。这样减少了等待时间，提升了用户体验，省去了不必要的流量。 但是单页应用也有一个显著的问题：首次进入的时候，加载的资源太多，白屏时间太长。
1使用插件查看项目所有包及体积大小 2webpack外部扩展 3DLL方式
一、查看项目打包
webpack有个插件，可以查看项目一共打了多少包，每个包的体积，每个包里面的包情况。 首先下载插件
npm intall webpack-bundle-analyzer --save-dev
同时在webpack.config.js配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
在package.json中添加命令
“script”: {
"analyz": "NODE_ENV=production npm_config_report=true npm run deploy:prod"
}
我的webpack是1.X的 webpack 2.X的同学请看
然后命令行输入
npm run analyz
开始构建，根据项目大小不同，时间也不同。 过一会输出结果如下：
二、webpack外部扩展
列出了项目中较大的包，剩下的事情就是想办法如何减小这些包的体积（将一个大包拆成多个小包）。 项目中产生较大的包的原因可以从两个方面去考虑：
项目中引入的依赖包过于庞大； 业务代码集中在一块写，或者是业务代码写的比较繁琐； 对于这两个问题，我们可以从两个方面着手解决：
抽离项目中公共依赖的、不常变动的、体积较大的包； 将一个较大的业务代码文件，拆成多个较小的文件，异步加载（或者优化业务代码）。 这里面第二项涉及到改动业务代码，具体的情况就不同了，适合查看 如何优化JS代码。 我们来讨论第一种方法，在不改动业务代码的情况下，如何减小公共依赖。
要知道这些依赖是我们需要的，不可能排除不引入。 但是他们都是全局依赖的，万年不变的，可以使用浏览器自己的缓存来实现不重复加载。 具体做法就是： 将项目中需要的一些公共依赖包，并且不常变动的，单独取出，不再每次都打包编译（如React，Redux等）。 而是通过使用script标签形式cdn引入，这样在有缓存的情况下，这些资源均走缓存，不必加载。
具体做法：
总结需要抽离的公共依赖。
这些依赖需要满足一定的条件：
体积较大； 不常更新； 依赖较多； 是前置依赖； 常见的满足这类条件的包有：
react react-dom redux react-redux moment jquery 另外一些包文件如 Antd库文件，整个包较大，但是每次用什么取什么的话，库文件也会按需加载，不必单独取出。 还有这类库文件不建议单独取出，因为里面可能会有bug，需要更新。
使用CDN引入资源
以我的demo为例：我需要抽离出的文件有 react，react-dom，react-router，redux，react-redux，history。 将这些文件放到cnd上，注意，这些文件要是压缩版本，并且是用ES5编写的，否则浏览器报错。
<head>
<title>React Starter Kit</title>
<meta charset="utf-8">
最低0.47元/天 解锁文章
扫一扫
2220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
