H5 首屏优化

一.升级webpack4

1️⃣ vender/menufest/app
app.js是入口js，vendor则是通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容。

   vendor: ['react', 'react-router-dom', 'react-dom', 'react-redux']

2️⃣启用optimization
runtime 优化持久化缓存的
, runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单, 模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来, 配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效. optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来.

optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    // minimizer: true, // [new UglifyJsPlugin({...})] //minimizer 必须是数组，在production模式下使用到，见步骤4
    splitChunks: {
      chunks: 'all', //对哪些模块进行优化
      minSize: 30000, //要生成的块的最小大小。
      minChunks: 1, //分割前必须共享模块的最小块数。
      maxAsyncRequests: 5, //按需加载最大并行请求数
      maxInitialRequests: 5, //入口点处的最大并行请求数。
      name: false, //拆分块的名称。提供true将根据块和缓存组密钥自动生成名称。提供字符串或函数将允许您使用自定义名称。如果名称与入口点名称匹配，则将删除入口点。
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'all',
          priority: -10,
          reuseExistingChunk: true,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(less|scss|css)$/,
          chunks: 'all', // merge all the css chunk to one file
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  },

二 依赖的正确安装

devDependencies用于本地环境开发时候。
dependencies用户发布环境
其实看名字我也知道是这个意思，我觉得没解释情况。
devDependencies是只会在开发环境下依赖的模块，生产环境不会被打入包内。通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境。
而dependencies依赖的包不仅开发环境能使用，生产环境也能使用。其实这句话是重点，按照这个观念很容易决定安装模块时是使用--save还是--save-dev。

三 按需加载

1 使用 react-loadable 实现路由的动态加载
2.第三方库的按需加载 ，如antMobile的按需加载，在.babelrc 中配置

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-runtime",
    ["import", { "libraryName": "antd-mobile","style": "css" },]
  ]
}

四 合理使用cdn

五 js脚本合理引用

1.尽量减少head中的script脚本
2.高德地图api改为异步加载

const jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = 'https://webapi.amap.com/maps?v=1.4.8&key=dfba0f951c70f029a888263a3e931d0a&callback=onLoad';
document.head.appendChild(jsapi);