曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了。近年来网络前端开发领域朝着规范开发的方向演进。体现在以下两点:
1, MVC研发构架。多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题…)
2,构建工具层出不穷。多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重复的工作)
<李>模块化开发
<李>将前端性能优化理论落地,代码压缩,合,并缓存控制,提取公共代码等李
<李>其他的还包括比如你可以用西文6或CoffeeScript写源码,然后构建出浏览器支持的ES5李
所以,前端这么好玩,如果还有项目没有前后端分离的话,真的是守旧过头了。
<强>主流构建工具
市面上有许多构建工具,包括繁重,吞咽,browserify等,这些和WebPack都是打包工具。但WebPack同时也具备以下特点:
相比繁重,WebPack除了具备丰富的插件外,同时带有一套加载(装载机)系统。使它支持多种规范的加载方式,包括ES6, CommonJS, AMD等方式,这是繁重,吞咽所不具备的。
从代码混淆的角度来看,WebPack更加的极致
代码分片为处理单元(而不是文件),使得文件的分片更为灵活。
注:此处只做简单的比较,不论孰优孰劣。其实工具都能满足需求,关键是看怎么用,工具的使用背后是对前端性能优化的理解程度。
最近在用webpack优化首屏加载性能,通过几种插件之后我们上线前后的速度快了一倍,在此就简单的分享下吧,先上个优化前后首屏渲染的对比图。
可以看到总下载时间从3800 ms缩短到1600 ms。
我们在用webpack时一般都会选择多入口文件吧,为的就是将自己的源码跟第三方库代码分离。这是之前的代码,
条目:{
条目:“。/src/main.js ',
供应商:[‘vue’,‘vue-router’,‘vuex’,‘element-ui’,‘echarts’)
},
输出:{
路径:config.build.assetsRoot,
文件名:utils.assetsPath (js/[名字]。[chunkhash] . js”),
chunkFilename: utils.assetsPath (js/[id]。[chunkhash] . js”)
}
echarts非常大,所以打包时的vendor.js大概为1.2 mb(经过gzip压缩之后),而且首页没有用到echarts,所以我之后使用了将外部第三方库以cdn的方式去引入,下面是优化过的代码
条目:{
条目:“。/src/main.js ',
供应商:[‘vue’,‘vue-router’,‘vuex’,‘element-ui’)
},//这里的输出中为基地的输出,不是生产的输出
输出:{
路径:config.build.assetsRoot,
文件名:“[名字]. js”,
libraryTarget:“umd格式”,
publicPath: process.env。NODE_ENV===? # 63;
config.build。assetsPublicPath: config.dev.assetsPublicPath
},
外部:{
echarts:“echarts”,
_:“lodash”
},
这就是优化前后的对比。
然后我们要到html中以脚本标签的形式去引中外部的cdn。之后就可以在相应的文件中导入了,他的好处是不管你在多少vue文件中引用多少次,他都不会打包到所有的树干(这里的树干”指的是按需加载,一会详细说明)中,这是用webpack-bundle-analyzer插件展示的效果。
var BundleAnalyzerPlugin=要求(webpack-bundle-analyzer) .BundleAnalyzerPlugin;
新BundleAnalyzerPlugin ({//可以是“服务器”、“静态”或“禁用”。//在“服务器”模式下,分析器将启动HTTP服务器来显示软件包报告。//在“静”态模式下,会生成带有报告的单个HTML文件。//在“禁用”模式下,你可以使用这个插件来将“generateStatsFile”设置为“真正的”来生成Webpack统计JSON文件。
analyzerMode:“服务器”,//将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: 127.0.0.1,//将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,//路径捆绑,将在“静态”模式下生成的报告文件。//相对于捆绑输出目录。
reportFilename:“report.html”,//模块大小默认显示在报告中。//应该是“统计”,“解析”或者的gzip中的一个。//有关更多信息,请参见“定义”一节。
defaultSizes:“解析”,//在默认浏览器中自动打开报告
openAnalyzer:没错,//如果为真,则Webpack统计JSON文件将在包输出目录中生成
generateStatsFile:假的,//如果“generateStatsFile”为“真实的”,将会生成Webpack统计JSON文件的名字。//相对于捆绑输出目录。
statsFilename:“stats.json”,//stats.toJson()方法的选项。//例如,您可以使用“来源:假”选项排除统计文件中模块的来源。//在这里查看更多选项:https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js # L21
statsOptions:空,
logLevel:‘信息’//日志级别。可以是“信息”、“警告”,“错误”或“沉默”。
})
