之前升级脚手架,现在回头总结一下
因为打包与编译的速度很慢,所以就打算配置DllPlugin,分离第三方插件优化打包速度。我是先在package.json里配置了命令
"dll": "webpack -p --progress --config ./webpack.dll.conf.js" 然后
而生成 webpack.dll.conf.js需要webpack命令,本地安装cnpm i webpack --save-dev之后运行webpack还是报webpack不是命令。需要全局安装webpack: cnpm i -g webpack之后运行webpack提示安装webpack-cli 输入y自动安装就可以了。
打包之后虽然打包速度快了很多 但是运行起来报错了,后来是忘了在index.html中引入打包出来的js,配置DLL三个组成部分,vue.config.js里添加插件,webpack.dll.conf.js里配置相应参数,package.json里配置编译命令。首先运行npm run dll生成json映射文件与第三方插件合成包。之后正常编译就可以了。配置成功以后,热更新偶尔会报找不到文件的错误。目前还没有找到原因
问题:文件大小超出限制
打包出现这种错误:asset size limit: the following assets(s) exceed the recommended size limit (244kb). this canimpact web performance
文件大于244kb可能会影响性能。选择gzip压缩减少体积。我这种是压缩完以后还是大于244kb。可以选择
设置performance: { hints: false }取消性能检测
出现Conflicting order. Conflicting order. Following module has been added错误引用别人的文章:
mini-css-extract-plugin遇到的问题
编译忽略空白符&nbap;问题
问题描述:升级cli4.0之后在标签里只写一个 空白占位符的话编译之后就找不到这个占位符了,导致元素的宽高撑不起来
简单解决的办法是加一个空白标签用v-html="‘’ ‘’"去做或者使用webpack配置。相关问题链接https://github.com/vuejs/vue/issues/11059 && https://github.com/vuejs/vue/issues/10485