vue项目打包优化，减少代码体积，提升页面加载速度，配置cdn链接，增加gzip压缩，不生成.map文件，删除控制台输出等优化

最新推荐文章于 2025-03-14 10:03:32 发布

kq-blue

最新推荐文章于 2025-03-14 10:03:32 发布

阅读量1.2k

点赞数 20

文章标签： vue.js 前端 javascript webpack

本文链接：https://blog.youkuaiyun.com/m0_55074611/article/details/143759517

版权

项目优化大概从三个方向进行

第一个是使用cdn链接进行文件库加速，能够提升速度
第二个是对文件整体进行压缩
使用了gzip压缩，除了在代码中进行配置以外还需要在你服务器的nginx文件中进行压缩配置。此配置明显能够提升网页速度。我的项目平时十几秒才能加载出来首页，配置后秒进
第三个是对删除控制台输出，生成文件优化等配置

1、使用cdn链接进行优化加速（使用内网的客户需要添加白名单，将cdn地址添加进去，不然使用不了）

入口文件中配置cdn链接
在public文件夹下的index.html文件中配置cdn链接 配置自己所需要的文件cdn地址
在这放两个cdn地址有需要的包自己去找
https://cdn.bootcss.com
https://cdnjs.cloudflare.com

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.15.14/index.js"></script>

在vue.config文件中配置
配置webpack打包项configureWebpack（是Vue CLI配置中的一个属性。它允许你直接修改底层的Webpack配置对象），和devServer同级
在externals（它告诉Webpack不要将某些库打包到你的应用程序的最终输出文件中。相反，它假设这些库会在你的应用程序运行的浏览器环境中全局可用）中配置

 //cdn 链接需要的配置
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios':'axios'
    }
  },

配置好文件后在使用的地方可以直接使用这些外部库的名字，不用在进行引用
例如在main.js 文件中的配置项
平时需要引用在使用如图1所示，在引入cdn链接后直接使用外部库名称，如图2所示

例如 store文件夹下的文件配置
在store中的配置项Vuex直接使用，对于后续的router配置和axios也是一样的需要直接使用外部库名称

2、对文件进行gzip压缩

下载插件compression-webpack-plugin （npm install compression-webpack-plugin --save-dev）
引入插件 const CompressionPlugin = require(‘compression-webpack-plugin’);
在vue.config.js文件中进行配置

//gzip压缩
  chainWebpack(config){ 
    config.externals({ './cptable': 'var cptable' })
    config.resolve.alias
      .set('@', resolve('src'))
    config.module
    .rule('vue')
    .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
      options.compilerOptions.preserveWhitespace = true
      return options
    })
    .end()
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        filename:"[path].gz[query]",//设置打包后的文件名称
        algorithm:"gzip",
        test:/\.(js|css)$/,//打包什么类型的文件
        // threshold:10240, //当文件体积大于10k打包成gzip文件
        threshold: 10, //当文件体积大于10k打包成gzip文件
        deleteOriginalAssets:false,//是否不保留压缩成gzip之前的原文件
        minRatio:0.8//所压缩的文件只有压缩比例比定义这个比例更好才可以执行压缩这个文件
      }))
    }
  },

服务器nginx文件配置
找到服务器nginx文件添加以下代码

	gzip on;
	gzip_static on;
	gzip_min_length 1k;
	gzip_comp_level 9;
	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary on;
	gzip_disable "MSIE [1-6]\.";

以上就是gzip压缩

3、其余优化配置

下载插件 terser-webpack-plugin （npm install terser-webpack-plugin --save-dev）
引入插件 const TerserPlugin = require(‘terser-webpack-plugin’);
配置 configureWebpack

compress: 压缩选项，可以传递给Terser的压缩选项。
drop_console: 如果设置为true，在压缩过程中会删除所有的console.log语句。
extractComments: 设置为false会阻止将Terser生成的注释提取到单独的文件中。

configureWebpack: (config) => {
    // 删除 webpack 中的预加载和预获取资源的插件
    // 这些插件通常会在项目中引入一些未使用的资源，对于一些性能要求较高的项目，可能希望移除这些插件以减少无用资源的加载。
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    // 将入口文件配置为包含了 Babel polyfill 的 main.js 文件
    config.entry.app = ['@babel/polyfill', './src/main.js']
    // const plugins = [];
    const isProduction = process.env.NODE_ENV === 'production';
      config.plugins.push(
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            output: {
              comments: false,
            },
            compress: {
              drop_console: true,
            },
          },
        }),
      );
    return {
      externals: [{
        './cptable': 'var cptable'
      }]
    }
  },