vue vue.config.js配置问题以及热更新慢的问题

vue.config.js配置

• 使用 webpack-bundle-analyzer 插件查看打包文件大小*

cnpm install webpack-bundle-analyzer --save-dev

// 引入
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 展示图形化信息
chainWebpack: config => {
  config
      .plugin('webpack-bundle-analyzer')
      .use(BundleAnalyzerPlugin)
}

使用 uglifyjs-webpack-plugin 疯狂报错,现在用的是 terser-webpack-plugin
vue-cli3.0中vue.config.js配置.

const TerserPlugin = require('terser-webpack-plugin')
config.optimization.minimizer([new TerserPlugin({
    terserOptions: {
        mangle: true, // 混淆，默认也是开的，mangle也是可以配置很多选项的，具体看后面的链接
        output: { // 删除注释
          comments: false,
        },
        compress: {
            drop_console: true，//传true就是干掉所有的console.*这些函数的调用.
            drop_debugger: true, //干掉那些debugger;
            pure_funcs: ['console.log'] // 如果你要干掉特定的函数比如console.info ，又想删掉后保留其参数中的副作用，那用pure_funcs来处理
        }
    }
})])

VUECLI3打包报警告：CHUNK CHUNK-COMMON [MINI-CSS-EXTRACT-PLUGIN] CONFLICTING ORDER.
解决方法: 热更新慢的问题
Vue项目使用terser-webpack-plugin打包报错TypeError: Cannot read property ‘javascript‘ of undefined的原因和可能的解决办法

cnpm install -D terser-webpack-plugin@4.2.3

热更新慢的问题

在配置打包信息时，随着打包压缩的信息增加，热更新也在逐渐变得缓慢为此参考石界星空.来进行处理，并做了笔记:
安装babel-plugin-dynamic-import-node插件

cnpm install babel-plugin-dynamic-import-node --save-dev

如何使用：
1.如果你使用的是：.babelrc就在.babelrc文件中添加：

module.exports = {
	presets: ['es2015', 'stage-2'],
	plugins: ['tronsfrom-runtime', 'tronsfrom-vue-jsx'],
	comments: false,
	env: {
		development: {
			plugins: ['dynamic-import-node']
		}
	}
}

2.如果你使用的是：babel.config.js

module.exports = {
	presets: ['@vue/app'],
	env: {
		development: {
			plugins: ['dynamic-import-node']
		}
	}
}

中小型项目的下载
链接：https://pan.baidu.com/s/107tC4iAr7pAihOxSRcuBPw
提取码：kj8d

---

欢迎点赞收藏

---