- 组件全局引入改为按需引入
element-ui按需引入:
- 安装babel-plugin-component
npm install babel-plugin-component -D
用cnpm
会更快 - 将 .babelrc 修改为:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["component",[
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]]
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node", "istanbul"]
}
}
}
根据自己已有的改
- 在 main.js 中写入以下内容:
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
})
- 路由懒加载
没有懒加载的格式, 先导入后直接用导入名
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
懒加载格式, 不需要导入,直接在component:resolve
中写路径
export default new Router({
mode: 'history', // 去掉路由地址的#
routes: [
{
path: '/login',
name: 'login',
meta:{title:'login'},
// component: login
component:resolve => require(['../page/login'], resolve)
}
]
})
- Nginx 是否开启 gzip
在nginx的配置文件中加入如下配置, 加在http
里面
gzip on;
#不压缩临界值,大于1K的才压缩,一般不用改
gzip_min_length 1k;
#buffer,就是,嗯,算了不解释了,不用改
gzip_buffers 4 16k;
#用了反向代理的话,末端通信是HTTP/1.0,默认是HTTP/1.1
#gzip_http_version 1.0;
#压缩级别,1-10,数字越大压缩的越好,时间也越长,看心情随便改吧
gzip_comp_level 2;
#进行压缩的文件类型,缺啥补啥就行了,JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式application/javascript 就行了
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;
#跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary off;
#IE6对Gzip不怎么友好,不给它Gzip了
gzip_disable "MSIE [1-6]\.";