• 提取 .env.development .env.dev-prod .env.production .env.test 等配置
      • 将 base_api base_url dist_url 放到配置文件
      • 修改 scripts 中的命令
    • jenkins 流水线持续集成
    • cdn加速
    • 剔除 console/debugger
    • 全局样式引用
    • 合理使用 mixin
    • 模块化 vuex router
    • 预加载 prefetch
    • 路由懒加载
    • 配置文件夹别名
    • 去除map文件
      • productinSourceMap: process.env.NODE_ENV !== "production",
    • 分离css

    • 优化less/sass

      2. css: {
      3.   sourceMap: process.env.NODE_ENV === 'development',
      4.   requireModuleExtension: true,
      5.   loaderOptions: {
      6.     css: {
      7.       modules: {
      8.         getLocalIdent: (context, localIdentName, localName, options) => {
      9.           let i = 0
      10.           while(i < cssModuleExcludes.length) {
      11.             if (cssModuleExcludes[i].test(localName)) return localName
      13.             i += 1
      14.           }
      16.           let filePath = context.context.replace(context.rootContext, '')
      17.           let filename = context.resourcePath.replace(context.context, '').replace(/^\/|\\|\.vue$/g, '')
      19.           filePath = upath.normalize(filePath)
      21.           filePath = filePath.replace(/\/src\/components\//, '/c/')
      23.           filePath = filePath.replace(/\/src\/views\//, '/v/')
      25.           filePath = filePath.split(/\/|\\/).filter(i => i.length).join('-')
      27.           if (filename === 'index') return `${filePath}__${localName}`
      29.           return `${filePath}-${filename}__${localName}`
      30.         },
      31.       },
      32.     },
      33.     // pass options to less-loader
      34.     less: {
      35.       lessOptions: {
      36.         modifyVars: {
      37.           'primary-color': '#3977EB',
      38.           'font-family': ' "Microsoft YaHei","Chinese Quote","PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
      39.         },
      40.         javascriptEnabled: true
      41.       },
      42.     },
      43.   }
      44. },

    • 图片压缩

    • lodash 优化

    • 打包结果分析

      2. chainWebpack(config) {
      3.   config.plugin("lodashReplace")
      4.     .use(new LodashModuleReplacementPlugin());//优化lodash
      6.   // 移除 prefetch 插件
      7.   config.plugins.delete('prefetch')
      8.   // 移除 preload 插件
      9.   config.plugins.delete('preload')
      11.   const entry = config.entry('app')
      12.   entry.add('babel-polyfill')
      14.   // 关闭打包大小限制
      15.   config.performance.set('hints', false)
      17.   // 进行打包情况的监测
      18.   if (process.env.analyzer) {
      19.     config
      20.       .plugin('webpack-bundle-analyzer')
      21.       .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
      22.   }
      24.   config
      25.     .plugin('ignore-moment')
      26.     .use(new webpack.IgnorePlugin(
      27.       /^\.\/locale$/,
      28.       // /^\.\/locale\/zh-cn$/,
      29.       /moment$/
      30.     ))//忽略/moment/locale下的所有文件
      32.   // set svg-sprite-loader
      33.   config.module
      34.     .rule('svg')
      35.     .exclude.add(resolve('src/icons'))
      36.     .end()
      37.   config.module
      38.     .rule('icons')
      39.     .test(/\.svg$/)
      40.     .include.add(resolve('src/icons'))
      41.     .end()
      42.     .use('svg-sprite-loader')
      43.     .loader('svg-sprite-loader')
      44.     .options({
      45.       symbolId: 'icon-[name]'
      46.     })
      47.     .end()
      48. },

    • 公共代码抽离

    • 开启 gzip 

      2. configureWebpack: config => {
      3.   const conf = {
      4.     output: {
      5.       sourcePrefix: ' '
      6.     },
      7.     amd: {
      8.       toUrlUndefined: true
      9.     },
      10.     resolve: {
      11.       alias: {
      12.         'vue$': 'vue/dist/vue.esm.js',
      13.         '@': path.resolve('src'),
      14.       }
      15.     },
      16.     plugins: [],
      17.   }
      19.   // 添加gzip压缩
      20.   if (process.env.NODE_ENV === 'production') {
      21.     conf.plugins.push(new CompressionPlugin({
      22.       test: /\.js$|\.html$|\.css$/, // 匹配文件名
      23.       threshold: 10240, // 对超过 10K 的数据进行压缩
      24.       deleteOriginalAssets: false,
      25.     }))
      26.   }
      28.   return conf
      29. }