vue-cli 脚手架是如何打包优化

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:
...

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

尾缀	状态变动	常应用于
hash	文件变动，立即改变	图片等资源
chunkhash	修改到当前模块或者当前引用的模块才改变	常用于 js
contenthash	当前模块的内容变了，值才改变	常用于 css