在http1的时代,比较常见的一种性能优化就是合并http的请求数量,通常我们会把许多js代码合并在一起,但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了。而如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,在需要某段代码的时候再加载它,下次若再需要用则从缓存中读取,一来可以更好地使用浏览器缓存,再者就是可以提高首屏加载速度,很好提升用户的体验。
<强>核心思想
业务代码和基础库的分离
这个其实很好理解,业务代码通常更新迭代很频繁,而基础库通常更新缓慢,这里做拆分的话可以充分利用浏览器缓存来加载基础库代码。
<强>按需异步加载
这个主要解决首屏请求大小的问题,我们在访问首屏的时候只需要加载首屏所需的逻辑,而不是加载所有路由的代码。
<>强实战
最近,采用vuetify改造了一个内部系统,一开始用了最常用的webpack配置,功能很快开发了,可是一打包,发现效果不是很明显,打出很多大包
const path=要求(“路径”)
const webpack=要求(“webpack”)
const CleanWebpackPlugin=要求(“clean-webpack-plugin”)
const HtmlWebpackPlugin=要求(“html-webpack-plugin”)
const BundleAnalyzerPlugin=要求(webpack-bundle-analyzer) .BundleAnalyzerPlugin;
const generateHtml=new HtmlWebpackPlugin ({
标题:“逍遥系统”,
模板:“。/src/index . html”,
使变小:{
removeComments:真
}
}）
模块。出口={
条目:{
供应商:[‘vue’,‘vue-router’,‘vuetify’),
应用:“/src/main.js。”
}，
输出:{
路径:路径。解决(__dirname’。/dist '),
文件名:“[名字]。(哈希). js”,
chunkFilename:“[id]。[名字]。[chunkhash] . js”
}，
解决:{
扩展:['。js”、“.vue”),
别名:{
“vue美元”:“vue/dist/vue.esm.js”,
“公共”:路径。解决(__dirname’。/公共”)
}
}，
模块:{
规则:[
{
测试:/\ .vue/美元,
装载机:“vue-loader”,
选择:{
加载器:{
}//其他vue-loader选项到这里
}
}，
{
测试:/\ . js/美元,
装载机:“babel-loader”,
排除:/node_modules/}，
{
测试:/\。gif (png | jpg | | svg)/美元,
装载机:“file-loader”,
选择:{
objectAssign:“Object.assign”
}
}，
{
测试:/\ . css/美元,
装载机:[' style-loader ', ' css-loader ']
}，
{
测试:/\ .styl/美元,
装载机:[‘style-loader’,‘css-loader’,‘stylus-loader’)
}
]
}，
devServer: {
historyApiFallback:没错,
noInfo:真
}，
性能:{
提示:假
}，
devtool:“# eval-source-map ',
插件:[
新BundleAnalyzerPlugin (),
新CleanWebpackPlugin((“区域”)),
generateHtml,
新webpack.optimize.CommonsChunkPlugin ({
名称:“ventor”
}),
]
}
如果(process.env。NODE_ENV===?{
module.exports.devtool=' #源图'//http://vue-loader.vuejs.org/en/workflow/production.html
module.exports。插件=(module.exports。插件| | []).concat ([
新webpack.DefinePlugin ({
的过程。env ": {
NODE_ENV:“生产”的
}
}),
新webpack.optimize.UglifyJsPlugin ({
sourceMap:没错,
压缩:{
警告:假
}
}),
新webpack.LoaderOptionsPlugin ({
最小化:真
}）
])
}
<强> CommonChunkPlugin
ventor入口这里我们发现并没有筛选出所有引用的node_module下的模块,比如axios,所以导致打包到了app.js里了,这里我们做下分离
