因为从 webpack 4 开始,会根据 mode 来执行不同的优化。TerserPlugin 只在生产环境中生效,不在开发环境中生效。 选项描述 development 会将DefinePlugin 中process.env.NODE_ENV 的值设置为 development,启用 NamedChunksPlugin 和NamedModulesPlugin 优化选项 pr
// 1. HotModuleReplacementPlugin// 热模块替换newwebpack.HotModuleReplacementPlugin() // 2. FriendlyErrorsPlugin// 优化错误提示newFriendlyErrorsPlugin() // 3. CaseSensitivePathsPlugin// 强制区分大小写newCaseSensitivePathsPlugin() 4. 生产环境特有配置 // 1. TerserPlugin// 压缩JavaScriptnewTerserPlugi...
这个命令会执行webpack并生成打包后的文件,通常会存储在dist目录中。 四、优化生产环境 为了确保打包后的文件在生产环境中能够高效运行,你可以进行以下优化: 压缩代码:使用TerserPlugin压缩JavaScript代码。 移除console和debugger:通过配置babel-loader移除不必要的console.log和debugger语句。 分离CSS:使用MiniCssExtractPlugi...
通过以上优化措施,可以显著缩短 Vue 2.x 项目的生产编译时间。 const CompressionPlugin = require('compression-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); vue.config.js module.exports = { // 基础...
使用MiniCssExtractPlugin来提取CSS到单独的文件,并使用TerserPlugin来压缩JavaScript。 const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { configureWebpack: { ...
删除注释要引入webpack的plugins :terser-webpack-plugin(UglifyJsPlugin已经被官方废弃) 相关terser-webpack-plugin文档 在命令终端 输入下面的命令: 可以在output.js中查看到vue的webpack配置 vue inspect --mode=production > output.js 可以看到vue的webpack配置如下(optimization:{minimizer}) terser-webpack-plugin...
在Vue CLI项目中,Webpack配置文件通常隐藏在vue.config.js或node_modules/@vue/cli-service/webpack.config.js中。如果你没有自定义vue.config.js,可以直接在node_modules中查找Webpack配置。 3. 修改或删除UglifyJsPlugin插件中的混淆选项 由于Vue CLI通常使用terser-webpack-plugin而不是UglifyJsPlugin来进行代码压...
在命令终端 输入下面的命令: 可以在output.js中查看到vue的webpack配置 vue inspect --mode=production > output.js 1. 可以看到vue的webpack配置如下(optimization:{minimizer}) terser-webpack-plugin主要修改的是optimization.options.terserOptions下的配置 ...
在Vue项目的根目录下找到vue.config.js文件,如果没有则手动创建该文件。 在vue.config.js文件中添加以下配置: 代码语言:txt 复制 module.exports = { configureWebpack: { optimization: { // 防止函数被混淆 minimizer: [ new TerserPlugin({ terserOptions: { keep_fnames: true } }) ...
terser-webbpck-plugin & optimize-css-assets-webpack-plugin image-webpack-loader thread-loader cache-loader eslint & eslint-loader 之前介绍过了,webpack4的mode属性有"development"和"production"两种,对应开发环境与生产环境,由于两个环境下的配置会出现差异,一个webpack.base.conf就不太能适应接下来的应用...