目录
2.通过vue.config.js修改webpack的默认配置
4. configureWebpack和chainWebpack
项目优化
1.生成打包报告
打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:
(1)通过命令行参数的形式生成报告
(2)通过可视化的UI面板直接查看报告(推荐)
在可视化的UI面板中,通过控制台和分析面板,可以方便地看到项目中所存在的问题
打开可视化UI面板,点击“任务”=>“build”=》“运行”
运行之后就会将项目打包,还会生成一些对应的报告信息,在控制台和分析面板中可以看到项目中存在的问题
2.通过vue.config.js修改webpack的默认配置
通过vue-cli 3.0工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让程序员把工作的重心,放到具体功能和业务逻辑的实现上。
3.为开发模式与发布模式指定不同的打包入口![](https://i-blog.csdnimg.cn/blog_migrate/d63b7b72a95bc21c01ba1ad335026d4f.png)
4. configureWebpack和chainWebpack![](https://i-blog.csdnimg.cn/blog_migrate/c483221356910e48ba2cba5dbad4062d.png)
两者具体的使用差异,可参考如下网址:
https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3
5.通过chainWebpack自定义打包入口
这些都是要写到vue.config.js里面去的
将main.js重命名为main-dev.js再将代码复制一份到main-prod.js
在vue.config.js中,定义发布时的打包入口和开发时的打包入口,将下面的代码写入vue.config.js中
6.通过externals加载外部CDN资源
默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。
为了解决上述问题,可以通过webpack的externals节点,来配置并加载外部的CDN资源。凡是声明在externals 中的第三方依赖包,都不会被打包。
在vue.config.js中添加下面代码
将main-prod.js中的导入富文本编辑器和nprogress的样式表文件删除,在public/index.html头部中添加下面代码
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-qui