Vue打包优化

最新推荐文章于 2024-07-14 12:29:19 发布

秋月壹拾柒

最新推荐文章于 2024-07-14 12:29:19 发布

阅读量507

点赞数

本文链接：https://blog.csdn.net/Cl_YS/article/details/105847125

版权

本文介绍了Vue项目上线打包时如何移除console，通过babel-plugin-transform-remove-console和terser-webpack-plugin实现。接着讨论了开发环境与部署环境的切换，通过创建不同环境的入口文件和vue.config.js配置。最后探讨了减小包体积的方法，包括利用CDN和路由懒加载，详细解释了配置和实践步骤。

摘要由CSDN通过智能技术生成

1、Vue上线打包移除console

在发开阶段我们为了方便输出都会利用大量的console，但是在项目上线以后我们是不需要的，因此我们就要想办法去除，这里用到了两个方法一个是babel-plugin-transform-remove-console，一个是terser-webpack-plugin

1.babel-plugin-transform-remove-console

1.1.1.安装

npm install babel-plugin-transform-remove-console --save-dev

1.1.2 在项目根目录下的 babel.config 文件中加入如下代码

1.1.3 在启用服务即可

npm run build

2.terser-webpack-plugin

2.2.1安装

npm install terser-webpack-plugin --save-dev

2.2.1项目根目录下新建 webpack.config.js，注册此插件

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
}

重现打包即可