webpack学习教程之前端性能优化总结

前言

曾几何时，我们是如上图的方式引入JS资源的，相信现在很少遇见了。近年来Web前端开发领域朝着规范开发的方向演进。体现在以下两点：

1、MVC研发构架。多多益处（逻辑清晰，程序注重数据与表现分离，可读性强，利于规避和排查问题...）

2、构建工具层出不穷。多多益处（提升团队协作，以及工程运维，避免人工处理琐碎而重复的工作）

• 模块化开发
• 将前端性能优化理论落地，代码压缩，合并，缓存控制，提取公共代码等
• 其他的还包括比如你可以用ES 6 或CoffeeScript写源码，然后构建出浏览器支持的ES5

所以，前端这么好玩，如果还有项目没有前后端分离的话，真的是守旧过头了。

主流构建工具

市面上有许多构建工具，包括Grunt、Gulp、browserify等，这些和WebPack都是打包工具。但WebPack同时也具备以下特点：

相比Grunt，WebPack除了具备丰富的插件外，同时带有一套加载（Loader）系统。使它支持多种规范的加载方式，包括ES6、CommonJS、AMD等方式，这是Grunt、Gulp所不具备的。

从代码混淆的角度来看，WebPack更加的极致

代码分片为处理单元（而不是文件），使得文件的分片更为灵活。

P.S.此处只做简单的比较，不论孰优孰劣。其实工具都能满足需求，关键是看怎么用，工具的使用背后是对前端性能优化的理解程度。

引言

最近在用webpack优化首屏加载性能，通过几种插件之后我们上线前后的速度快了一倍，在此就简单的分享下吧，先上个优化前后首屏渲染的对比图。

可以看到总下载时间从3800ms缩短到1600ms。

我们在用webpack时一般都会选择多入口文件吧，为的就是将自己的源码跟第三方库代码分离。这是之前的代码，

entry: {
 entry: './src/main.js',
 vendor: ['vue', 'vue-router', 'vuex', 'element-ui','echarts']
},
output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

echarts非常大，所以打包时的vendor.js大概为1.2MB（经过gzip压缩之后），而且首页没有用到echarts，所以我之后使用了externals将第三方库以cdn的方式去引入，下面是优化过的代码

entry: {
 entry: './src/main.js',
 vendor: ['vue', 'vue-router', 'vuex', 'element-ui']
 },
 // 这里的output为base中的output，不是生产的output
 output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 libraryTarget: "umd",
 publicPath: process.env.NODE_ENV === 'production' ?
  config.build.assetsPublicPath : config.dev.assetsPublicPath
 },
 externals: {
 echarts: 'echarts',
 _: 'lodash'
 },