vue-cli3项目打包优化

艾欢欢

原始包大小

在这里插入图片描述

以下主要操作都在文件 vue.config.js 下进行,如没有此文件,就在项目根目录下新建。

1.去掉 .map 文件

.map 文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
有了 .map 就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。

操作:

module.exports = {
  // ...
  productionSourceMap: false,
}

包大小:

在这里插入图片描述

2.图片压缩

此操作会压缩图片质量,选择使用

操作:

npm install image-webpack-loader --save-dev
module.exports = {
  // ...
  chainWebpack: config => {
    // ...
    config.module
      .rule('images')
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  },
}

包大小:

在这里插入图片描述

3.去除console

代码中 console.log 越多,效果越明显,可选择使用。

操作:

npm install uglifyjs-webpack-plugin --save-dev
module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config
        .plugin('uglifyjs-plugin')
        .use('uglifyjs-webpack-plugin', [{
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        }])
        .end()
    }
  }
}

包大小:

在这里插入图片描述

4.CDN加速

维护上不受控制,所以只把那些不可能改动的代码或者库分离出来,通过CDN加速加载。

为了避免使用CDN遇到坑,建议使用可靠的CDN。

此项选择使用。不建议使用。

操作:

module.exports = {
  // ...
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 分离不常用资源库
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter'
      }
    }
  }
}
<!-- CDN示例 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

包大小:

在这里插入图片描述

5.开启Gzip压缩

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,可以减小60%以上的体积。

注意:这个需要服务器配合开启Gzip,也可打包时不配置,直接在服务器端进行Gzip压缩。

操作:

npm install compression-webpack-plugin --save-dev
module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('gzip-plugin')
        .use('compression-webpack-plugin', [{
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.html$|\.json$|\.css$|\.ttf$/,
          threshold: 0, // 只有大小大于该值的资源会被处理
          minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: true // 删除原文件
        }])
        .end()
    }
  }
}

包大小:

在这里插入图片描述

阅读 7.6k

漫漫前端路
热爱前端,学习、交流和分享前端技术,总结项目中出现的问题。前端攻城狮的升级之路。
373 声望
19 粉丝
0 条评论
373 声望
19 粉丝
文章目录
宣传栏