vue项目优化
1.v-if v-show
2.在页面destroy或beforeRouterLeave时清除定时器跟事件的监听
3.图标采用雪碧图
4.路由采用懒加载
5.组件采用按需加载
6.v-for遍历时一定为item添加key值
7.打包的vendor.js过大,采用cdn加载不打包进入vendor.js,步骤:1.在index界面引入cdn。2.在webpack.config.base.js文件中添加externals2.在main.js文件删除对应的引用,use采用在externals中的变量。
8.可以采用Gzip进行文件压缩。步骤:1.npm install --save-dev compression-webpack-plugin@1.1.11;2.在config中的index.js修改productionGzip属性为true。
9.happypack
npm install happypack -D webpack.base.config.js rules中添加对应的打包规则 { test: /\.vue$/, // loader: 'vue-loader', use: ['happypack/loader?id=vue'], // options: vueLoaderConfig }, { test: /\.js$/, // loader: 'babel-loader?cacheDirectory', use:['happypack/loader?id=babel'], exclude: /node_modules/, include: resolve('src') }, 然后 在plugin添加对应的配置 plugins: [ new HappyPack({ // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件 id:'vue', loaders:[ { loader:'vue-loader', options: vueLoaderConfig } ], threadPool: HappyPackThreadPool, }), new HappyPack({ // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件 id:'babel', // 如何处理.js文件,用法和Loader配置中一样 loaders:['babel-loader?cacheDirectory'], threadPool: HappyPackThreadPool, }), ],
rule中的id 与plugin 中的id需要一致