总结下针对不同warning的解决办法
1.image.png

chunk chunk-common [mini-css-extract-plugin]
Conflicting order. 说的是引用css 文件的顺序有冲突, 可以增加配置,忽略这样的warning
在vue.config.js 中增加

configureWebpack: {
    plugins: [
      new CustomFilterPlugin({
        exclude: /Conflicting order. Following module has been added:/    //忽略含有“Conflicting order. Following module has been added:”文本的警告
      }),
}

2.构建了两次版本, 一次是旧版的bundle, 一次是新版的bundle

-  Building legacy bundle for production...
(snip)
DONE  Compiled successfully in 42448ms
(snip)
-  Building modern bundle for production...
(snip)
DONE  Compiled successfully in 39693ms
(snip)
DONE  Build complete. The dist directory is ready to be deployed.
(snip)
Done in 89.76s.

这是因为build 时带了--modern 参数, 若只支持现代浏览器, 可以去掉, 在package.json 中增加

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

3.
image.png
资源(asset)和入口起点超过指定文件限制,需要在 vue.config.js 文件内做如下配置

configureWebpack: {
    performance: {
      hints: 'warning', // 三个取值 false;关闭性能提示  warning:  error:只提示报错
      maxAssetSize: 5*1024*1024, //资源asset 最大值5M
      maxEntrypointSize: 8*1024*1024, // 入口起点最大值8M
    }
  },

4.终于没有各种warning 了
image.png
image.png


CUI_PING
42 声望3 粉丝