vue 脚手架如何打包优化

之前一篇博客讲了 vue-cli 是如何构建项目的，这次讲讲 vue-cli 打包做了什么优化。

vue-cli 项目构建博客地址

vue-cli 优化

这里有压缩代码，代码分割，还有利用缓存三个方面

（1）压缩代码

使用压缩插件压缩代码，减少文件大小，是很常用的优化方式

new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
})

（2）代码分割

页面功能复杂导致加载体积过大时，就需要进行代码分割，一是分离业务代码和第三方库，二是按需加载

分离业务代码和第三方库：使变动较少的第三方库分离出来，利于缓存，不用经常更新

new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
})

具体如上图，在打包过程中，使用 CommonsChunkPlugin 插件从代码中分离出 vendor.js 这个公共代码。这里看 return 内容，插件会遍历第三方包 node_modules 里面被用到的以 js 结尾的文件然后进行打包。

按需加载：利用 import() 语法，实现异步加载

这里明确一下， webpack 打包会把所有文件打包成 js 文件以 module.export 方式输出，在文件内 import() 引用其他文件会返回 Promise，并把文件内容单独合成在一个新文件按需引入，而不是并入当前文件，从而实现了代码分割。

在路由中，页面按需加载

const Index = () => import('VIEWS/index')
export default [
{
name: 'index',
path: '/index',
component: Index
}
]

页面中，组件按需加载

tempelete:
<swiper>...</swiper>
script:
const Swiper = () => import('COMPONENTS/Swiper'）

（3）利用缓存

这个第三点划分其实是有问题的，但是主要目的是要讲一讲如何利用缓存这一点，看下面这篇关于关于前端部署资源缓存的优化的博客。

前端部署博客地址

看了上面的博客，应该明白为什么要在文件后面加尾缀了。所以这里

/* webpack.base.conf.js 文件 */
// url-loader 解析图片资源
//会把图片转化为Base64形式，随html一起加载减少http请求
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
/* webpack.prod.conf.js 文件	*/
//使用插件从 js 代码中分离出 css：
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
})
//输出js文件：
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

最后

以上就是天真樱桃为你收集整理的vue-cli 脚手架是如何打包优化vue 脚手架如何打包优化的全部内容，希望文章能够帮你解决vue-cli 脚手架是如何打包优化vue 脚手架如何打包优化所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。