vue-cli新建工程后提高页面加载速度（含升级webpack4）

最新推荐文章于 2024-05-06 18:15:30 发布

weixin_33920401

最新推荐文章于 2024-05-06 18:15:30 发布

阅读量525

点赞数 1

文章标签： webpack javascript 网络 ViewUI

原文链接：https://my.oschina.net/yxmBetter/blog/2248872

版权

2019独角兽企业重金招聘Python工程师标准>>>

提高页面加载速度的方式

升级webpack4.x及升级过程中产生问题的解决方式

webpack升级一路填坑记

图片压缩

用一个webpack插件，这个插件叫 image-webpack-loader。
安装插件： $ npm install image-webpack-loader --save-dev
相关配置修改如下：

//webpack.base.conf.js
//原先配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
	limit: 10000,
	name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}
//修改后配置
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: []'url-loader?limit=10000&name='utils.assetsPath('img/[name].[hash:7].[ext]'),'image-webpack-loader']
}

修改后查看对比

//源文件
$ ls -lh src/images
total 256
//压缩后
$ ls -lh dist/images
total 96

路由懒加载，生成多个小js文件按需加载

{
	path: '/login',
	name: 'login',
	component: resolve => { require(['@/components/login.vue'],resolve) }
}

gzip压缩

启用gzip压缩，很简单，工程下的config/index.js中，将productionGzip由false改为true,除此之外，就需要后台修改配置，返回gzip文件，具体方式网上很多，我在下面贴几个。我试过，这个方式会很好的压缩了文件，将app等文件压缩到很小，所以页面加载下载文件会小很多，但时间上，不一定。。。而且对于IE11来讲，这个好像不能实现。。。
gzip实现方式：

取消打包后的map文件

在打包vue文件时，会发现出现很多.map文件，
map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
map文件下载时需占用太多浏览器资源，而且特别耗时，导致加载速度慢，可以在生产环境取消生成map文件。在工程/config/index.js文件配置中，将productionSourceMap由true改为false即可。