// import Vue from 'vue' // import ElementUI from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' // import VueRouter from 'vue-router' import App from './App.vue' import routes from './router' import utils from './utils/Utils' Vue.use(ELEMENT) Vue.use(VueRouter) const router = new VueRouter({ mode: 'hash', //路由的模式 routes }) new Vue({ router, el: '#app', render: h => h(App) })
8、使用 HappyPack 多进程解析和处理文件
由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。
HappyPack 就能让 Webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
HappyPack 对 file-loader、url-loader 支持的不友好，所以不建议对该 loader 使用。
使用方法如下：
1、HappyPack 插件安装： npm i -D happypack
2、webpack.base.conf.js 文件对 module.rules 进行配置
module: { rules: [ { test: /\.js$/, use: ['happypack/loader?id=babel'], include: [resolve('src'), resolve('test')], exclude: path.resolve(__dirname, 'node_modules') }, { test: /\.vue$/, use: ['happypack/loader?id=vue'] } ] }
3、在生产环境 webpack.prod.conf.js 文件进行配置
const HappyPack = require('happypack') // 构造出共享进程池，在进程池中包含5个子进程 const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 }) plugins: [ new HappyPack({ // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件 id: 'babel', // 如何处理.js文件，用法和Loader配置中一样 loaders: ['babel-loader?cacheDirectory'], threadPool: HappyPackThreadPool }), new HappyPack({ id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件 loaders: [ { loader: 'vue-loader', options: vueLoaderConfig } ], threadPool: HappyPackThreadPool }) ]
总结
比较实用的方法: 按需加载，优化loader配置，关闭生产环境的sourceMap，CDN优化。
vue-cli已做的优化： 代码压缩，提取公共代码，再优化空间不大。
根据项目实际需要和自身开发水平选择优化方法，必须避免因为优化产生bug。