webpack性能优化
in 默认分类 with 0 comment

webpack性能优化

in 默认分类 with 0 comment

三方组件局部引用

安装babel-plugin-component插件才,局部引用

import {
  Autocomplete,
  Checkbox
  ……
} from 'element-ui'
Vue.use(Autocomplete);
Vue.use(Checkbox);

缩小webpack或者其他打包工具生成的包的大小

webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。

使用预渲染的方式

使用gzip减小网络传输的流量大小

   gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;

按照页面或者组件分块懒加载

 component: resolve => require(['../components/(你的组件)'], resolve)
Responses