vue项目打包优化

vue项目前端优化

不断学习提升自我，记录两个看到的vue项目打包优化方式,gzip和cdn。

查看资源树

webpack插件 cnpm i webpack-bundle-analyzer

vue.config.js配置

module.exports = {
  chainWebpack: (config) => {
    /* 添加分析工具 */
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        .end()
      config.plugins.delete('prefetch')
    } else {
    }
  }
}

输入命令 npm run build --report

打开资源管理页面

1.productionSourceMap

将productionSourceMap设置为false，是否在构建生产包时生成 sourceMap 文件，false将提高构建速度

2.开启gzip打包

首先安装插件 cnpm i compression-webpack-plugin -D

在vue.config.js中配置

  configureWebpack: (config) => {
    if (isProduction) {
      // 为生产环境修改配置...
      config.mode = 'production'
      return {
        plugins: [new CompressionPlugin({
          test: /\.js$|\.html$|\.css/, //匹配文件名
          threshold: 10240, //对超过10k的数据进行压缩
          deleteOriginalAssets: false //是否删除原文件
        })]
      }
    }
  }

开启gzip后同时也需要服务端支持才行

3.引入CDN加速

• 1.定义const OPEN_CDN = true;是否启用cdn加速
• 2.找出不需要编译进文件的依赖库,以vue为例

//vue.config.js
// 是否线上模式
const isProduction = ['production', 'prod'].includes(process.env.NODE_ENV);
//是否开启cdn加速
const OPEN_CDN = true;
//配置不要编译的依赖库
 configureWebpack: (config) => {
 	if (isProduction && OPEN_CDN) {
    	 config.externals = {
          'vue': 'Vue'
        }
    }
 }	

• 3.获取版本号
  • 第一种方法通过const vueV = require('vue/package.json').version获取最新的版本，
  • 第二种方法，通过package.json文件获取。

    const packageVersion = require('./package.json');
    const dependencies = packageVersion.dependencies;
	const vueV = dependencies['vue'].slice(1);

• 4.引入cdn

const CDN = {
  css: [],
  js: [
    `https://cdn.bootcss.com/vue/${vueV}/vue.min.js`,
  ]
};

 chainWebpack: (config) => {
 	if (isProduction && OPEN_CDN) {
      //设置cdn
      config.plugin('html')
        .tap(args => {
          args[0].cdn = CDN;
          return args;
        })
    }
 }

• 5.在index.html中动态引入

 <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
            htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
  <% } %>

  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
            htmlWebpackPlugin.options.cdn.js) { %>
  <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>

操作完之后便可以将一些比较大的依赖包转化为cdn引用了，如果出现404，请查看是否具有当前版本号的cdn。