前端工程优化总结

已后台为例

背景

本地启动项目很慢，影响开发体验及效率

优化

cdn + webpack externals

在工程中， import Vue from 'vue', 此处引入的是node_modules下的vue包。 现在我们要使用cdn上的vue.min.js:

1. script引入vue
2. webpack中配置externals

externals中配置的时候，需知道vue在window上挂在哪个上，不一定就是包的名字。

modules.exports = {
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
  },
}

比如vue挂在window的Vue上。webpack中，会自动把vue包名指向window上对应的变量。

脚本引入工具

为了能够按需加载，项目中将提供了getScript方法，在需要引入的地方，调用此方法，引入js。

import libsMap from '../enums/libsMap';
/**
 * 加载cndjs库
 * 挂载在Vue上，可通过this.$getScript(libName)
 * @export
 * @param {*} libName libsMap.js中的js库名
 * @returns
 */
export function getScript(libName) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    let libSrc = libsMap[libName];
    if (!libSrc) {
      reject(`lib '${libName}' not defined`);
    }
    script.src = libSrc;
    script.onload = () => {
      resolve();
      document.body.removeChild(script);
    };
    script.onerror = () => {
      reject();
      document.body.removeChild(script);
    };
    document.body.appendChild(script);
  });
}

对应的，也提供了getCss方法

import libsMap from '../enums/libsMap';
/**
 * 加载cndjs库
 * 挂载在Vue上，可通过this.$getCss(libName)
 * @export
 * @param {*} libName libsMap.js中的库名
 * @returns
 */
export function getCss(libName) {
  if (!libName) {
    return
  }
  return new Promise((resolve, reject) => {
    let libSrc = libsMap[libName];
    let link = document.createElement('link');
    if (!libSrc) {
      reject(`lib '${libName}' not defined`);
    }
    link.type='text/css';
    link.rel = 'stylesheet';
    link.href = libSrc;
    link.onload = () => {
      resolve();
    };
    link.onerror = () => {
      reject();
    };
    document.querySelector('head').appendChild(link);
  });
}

按需引入js

在使用第三方库之前，加载对应的js，避免报错，可以使用async/await。

//比如
(async function() {
  getCss('videoJsCss')
  await getScript('videoJs')
  await getScript('videoPlayer')
  Vue.use(window.VueVideoPlayer)
})()

babel增加缓存

var webpackConfig = {
  module:{
    rules:{
      test: /\.js$/,
      loader: 'babel-loader?cacheDirectory',
    }
  }
}

vue-loader.conf.js sourcemap移除

webpack.dev.conf.js

element-ui/lib/theme-chalk/index.css 外链引入

const autoprefixer = require('autoprefixer');

module.exports = merge(baseWebpackConfig, {
  mode:'development',//不会 tree shaking 和代码压缩
  module: {
    rules: [
      {
        test:/\.(scss|css)$/,
        use:[
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                autoprefixer({
                  overrideBrowserslist:[
                    "Android 4.1",
                    "iOS 7.1",
                    "Chrome > 31",
                    "ff > 31",
                    "ie >= 8"
                  ]
                }),
              ].filter(Boolean)
            }
          },
          'sass-loader',
        ]
      }
    ]
  },
})

eslint增加配置化，不默认开启

开发时可以先不开启，最后需要校验时再开启

后面需要再优化的（时间原因）

cdn+按需引入

工程中，存在一部分包，仅在部分页面使用，没必要打入app.js中，比如echarts。

lodash的优化

lodash可以按需引入，通常可能会这么引入 import _ from 'lodash'。如果使用部分方法，则建议使用 import _find from 'lodash/find.js'。

node_modules/element-ui/src/utils 所有引用拆除

可以通过自己写一个类似的方法即可，不需要引用element的, 后面需要全部拆出

vue-cli2.0产物整体迁移到 vue-cli4.+

总结

工程优化优化好处多多
  如：
    1、减轻包体积，加快项目启动及构建速度
    2、缓存公共包，避免因为一次迭代，在app.hash.js 变更后，导致的缓存失效，用户重新拉取资源缓存
    3、减少首页白屏时间，可以让用户更快的触达讯息