Vue项目首屏优化--webpack

1、externals的使用

externals,官方文档给出的解释，就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在项目中通过CMD、AMD或者window/global全局的方式访问。例如：通过CDN将vue，vue-router，Element-UI从vendor.js中抽离出来，使用

//修改 build/webpack.base.conf.js

module.exports = {

... 

externals: {  

'vue': '    Vue',  

'vuex': 'Vuex',  

'vue-router': 'VueRouter',  

'element-ui': 'ElementUI' 

} 

...

} //在index.html模板文件中通过cdn引用这些

<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>

2、插件url-loader的使用

性能优化范围比较广，url-loader插件减少http请求数量(不只针对首屏)。

//url-loader配置参数
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader:  'url-loader',
  include: [resolve('static'),resolve('src')],
  options: {
    limt: 100000,
    name: untils.assetsPath('img/[name].[hash:7].[ext]')
  }
}

3、....持续学习中