VUE项目优化总结

查看打包文件结构和各种文件的比例

使用插件：webpack-bundle-analyzer

下载安装：npm install --save-dev webpack-bundle-analyzer

然后运行 npm run build --report 命令会自动打包，并弹出网页（包含打包文件图），vue-cli(2.0)已经帮你配置好了，传入一个report参数就可以启动了。

1.路由懒加载

原因：

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。

好处：

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，javascript包拆分开来，页面加载速度快、更高效。

代码片段：

原写法：

import Home from '@/pages/home/home'
routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: []
    }
]

懒加载写法：

router/index.js文件

routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/home'),
      children: []
    }
]

2.图片处理

原因：

原图是5040像素，大小1.1MB,初次加载时间要44.94s,影响首页加载速度。

好处：

加快首页加载，在不影响视觉的情况下减小资源大小。

方法：

1.在线压缩处理网站 2.ps 把图片宽度缩小到一半（PC最大一般1920px，我们当前2050px）

3.禁用webpack的devtools

原因：

webpack里面启用了sourceMap,默认会生成map文件，map文件是用来调试代码的。但是这在发布以后就完全没有用了。这里还要注意sourcemap的配置分开发（dev）和线上（build）两个地方配置，开发我们就不管了，就用默认的，线上我们是不需要这个代码的。

好处：

不生成.map文件,减小js文件大小。

方法：

修改config/index.js文件

build:{productionSourceMap: false}

4.cdn加速 [尽量选用国内源的cdn,国外的有的很慢]

原因：

当所有资源都从自己的服务器走会产生很多流量，请求量大可能会造成阻塞。

好处：

资源从免费cdn上走减少自己服务器的流量消耗，服务器压力小，用户体验提升。

原写法：

<script type="text/javascript" src="./static/lib/plupload-2.1.2/js/plupload.full.min.js"></script>

cdn写法：

index.html文件

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>文泉资源</title>
  <link href="https://unpkg.com/ant-design-vue@1.3.16/dist/antd.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
  <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.5.0/skins/default/aliplayer-min.css" />
</head>
<body>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://unpkg.com/ant-design-vue@1.3.16/dist/antd.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
  <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
  <script src="https://cdn.bootcss.com/plupload/2.1.2/plupload.full.min.js"></script>
  <script src="//g.alicdn.com/de/prismplayer/2.5.0/aliplayer-min.js"></script>
  <script src='https://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML'></script>
  <div id="app"></div>
</body>

然后在 webpack.base.conf.js 里面的 webpackConfig里面下面代码（避免webpack打包vue相关） cdn 后引入还是正常的 import引入

  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'ant-design-vue': 'antd',
    'element-ui': 'ELEMENT',
    'moment': 'moment',   
  },

externals作用是：映入了CDN就不要再打包这个模块了，所以通过 externals 来排除这个模块，减小打包后的体积。

5.css文件分开打包

原因：

默认css会打包到一个css 里面，一个就太大了

方法：

更改webpack.prod.conf.js 文件

allChunks: false,

6.后端协助

1）资源传输用Gzip方式 content-Encoding:Gzip

2) 启用浏览器缓存 cache-content:XXXXX

项目版本情况如下：

vue: 2.5.2
vue-router: 2.8.0
webpack: 3.6.0

遇到的问题：

1.vue-rouer报错

解决办法：原来安装的是3.0+的版本将低版本。

2.externals写法报错写的不对会返回 xx is not defined

externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'ant-design-vue': 'antd',
    'element-ui': 'ELEMENT',
    'moment': 'moment',   
},

3. cannot read property 'default' of undefined等一起出现的问题

原因：试了下externals加入'antd' 解决办法： moment放在antd前面引入。

  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://unpkg.com/ant-design-vue@1.3.16/dist/antd.min.js"></script>

参考链接

vue+webpack打包优化1 vue+webpack打包优化2 vue+webpack打包优化3 vue+webpack打包优化4

vue项目优化总结

VUE项目优化总结

查看打包文件结构和各种文件的比例

使用插件：webpack-bundle-analyzer

下载安装：npm install --save-dev webpack-bundle-analyzer

1.路由懒加载

原因：

好处：

代码片段：

原写法：

懒加载写法：

2.图片处理

原因：

好处：

方法：

3.禁用webpack的devtools

原因：

好处：

方法：

4.cdn加速 [尽量选用国内源的cdn,国外的有的很慢]

原因：

好处：

原写法：

cdn写法：

externals作用是：映入了CDN就不要再打包这个模块了，所以通过 externals 来排除这个模块，减小打包后的体积。

5.css文件分开打包

原因：

方法：

6.后端协助

1）资源传输用Gzip方式 content-Encoding:Gzip

2) 启用浏览器缓存 cache-content:XXXXX

项目版本情况如下：

遇到的问题：

1.vue-rouer报错

2.externals写法报错写的不对会返回 xx is not defined

3. cannot read property 'default' of undefined等一起出现的问题

参考链接

前后对比图

优化前

优化后

vue项目优化总结

VUE项目优化总结

查看打包文件结构 和 各种文件的比例

使用插件：webpack-bundle-analyzer

下载安装：npm install --save-dev webpack-bundle-analyzer

1.路由懒加载

原因：

好处：

代码片段：

原写法：

懒加载写法：

2.图片处理

原因：

好处：

方法：

3.禁用webpack的devtools

原因：

好处：

方法：

4.cdn加速 [尽量选用国内源的cdn,国外的有的很慢]

原因：

好处：

原写法：

cdn写法：

externals作用是：映入了CDN就不要再打包这个模块了，所以通过 externals 来排除这个模块，减小打包后的体积。

5.css文件分开打包

原因：

方法：

6.后端协助

1）资源传输用Gzip方式 content-Encoding:Gzip

2) 启用浏览器缓存 cache-content:XXXXX

项目版本情况如下：

遇到的问题：

1.vue-rouer报错

2.externals写法报错 写的不对会返回 xx is not defined

3. cannot read property 'default' of undefined等一起出现的问题

参考链接

前后对比图

优化前

优化后

查看打包文件结构和各种文件的比例

2.externals写法报错写的不对会返回 xx is not defined