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')
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：webpack学习教程之前端性能优化总结-创新互联
标题来源：http://bzwzjz.com/article/cepjig.html