vue项目开发优化

1 按需引入ui组件

比如elementUI，不要直接在main.js中全局引入所有的组件，可以根据elementui的说明文件，按需引入

项目中的组件

2 异步引入路由组件

使用

{

　　path:'/index',

　　name:'index',

       component:resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk')

}

vue自带的异步方式            //路由懒加载，打包之后，注释中webpackChunkName一样的会被打包到同一个js文件中

component: resolve => require(['@/components/index'], resolve)

es提案的import()

component: () => import(/* webpackChunkName: "indexChunk" */ '@/components/index.vue'’

webpack提供的require.ensure()

resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk')

路由懒加载时，路由不能动态传值

这段代码将组件分类到名为indexChunk的chunk中，在网站加载时会自动解析需要加载那个chunk，虽然分别打包在总体积会变大（同chunk将打包同一个js文件），但是减少了资源请求，从而提升了速度。

 resolve=>require(["@/components/index"],resolve)

3 源码优化

为item设置唯一的key值，减少watch数据，细分vue组件，按需加载图片，图片多的时候可以使用懒加载，SSR服务端渲染；

4 css   sourceMap

sourceMap: process.env.NODE_ENV === "production" ? false : true,

// 是否构建样式地图，false 将提高构建速度

 

 

5 如果上面的操作之后，还是慢可以这样设置，在项目打包的时候不打包第三方库，直接使用cdn进行引入，可以大大减少打包文件的体积

需要这样的在设置:demo:vue为例

externals:{'Vue':'Vue',/*这个名字要与main.js中import的vue同步*/'moment':'moment'},

使用vue-cli3需要这样设置：

configureWebpack: (config) => {
       Object.assign(config,{
        externals:{'Vue':'Vue'}
      });
}

其他的第三方插件都可以这样设置，以达到减少打包文件的大小，提升运行速度的效果

 在index.html中手动引入cdn上的vue.js

<script src="http://cdn.bootcss.com/vue/2.6.10/vue.min.js" type=''text/javascript'></script>

上面的方法，需要手动修改index.html，在开发环境注释掉，在打包的时候才需要引入，可以使用htmlWebpackPlugin

<!-- 通过htmlwebpackplugin动态注入脚本和样式 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
    <% } %>

引入css

 <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>

在vue.config.js中的配置

chainWebpack: (config) => {
      if(process.env.NODE_ENV==='production'){
        config.plugin('html')
        .tap(args => {
            args[0].cdn = cdn;
          return args;
        })
      }
}

const cdn = {
  // css: ['xxx.css', 'sss.js'],
  js: ['http://cdn.bootcss.com/vue/2.6.10/vue.min.js']
}