search

lengziyu / noteBook

This is my noteBook.
0 stars 0 forks source link

vue项目优化 #22

Open lengziyu opened 6 years ago

lengziyu commented 6 years ago

1.JS文件按需加载

vue的组件懒加载，不要使用import的方法引入组件，而是使用require.ensure。

import Order from '@/pages/Order'
//如果写了第二个参数，就打包到该`/JS/index` 的文件中。
const Order = r => require.ensure( [], () => r (require('@/pages/Order', 'index')))
//不写第二个参数，就直接打包在`/JS` 目录下。
const Order = r => require.ensure( [], () => r (require('@/pages/Order')))
lengziyu commented 6 years ago

2.压缩代码并移除console

使用UglifyJsPlugin 插件来压缩代码和移除console。

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})
lengziyu commented 6 years ago

3.将JS文件放在body的最后

默认情况下，build后的index.html中，js的引入是在header中。 使用html-webpack-plugin插件，将inject的值改成body。就可以将js引入放到body最后。

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
   inject: 'body',
})