项目性能和规范总结

使用 eslint 格式化指定文件

在package.json文件中增加通过 eslint 格式代码的方式。

"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js",
  "format": "eslint src/**/*.{jsx,js} --fix", // 这行的配置
  "deploy": "gh-pages -d build"
},

执行npm run format就会使用eslint的规则对src路径下的jsx和js文件进行格式化。
使用的规则可以在eslintConfig字段就行配置，比如默认使用的是 react-app 的规则。这个规则非常有限。

1
2
3

"eslintConfig": {
  "extends": "react-app",
}

可以使用 eslint 推荐的规则进行格式化。

"eslintConfig": {
  "extends": [
        “eslint:recommended”,
        "react-app"
  ],
}

重写格式规则

在 eslintConfig 中的 rule 字段进行设置。比如下面是要求 jsx 的缩进是 4 个空格的空白。

 "eslintConfig": {
  "extends": [
        “eslint:recommended”,
        "react-app"
  ],
 "rules":{
        "react/jsx-indent" :[“error”,4]
  }
}

执行npm run format后，不符合规则的文件将被修复成符合规则的格式。

提交的时候自动格式化

提交的时候做校验，需要用到 git 的 hooks，由于自己配置比较麻烦，可以使用第三方的公交husky

另外需要配合 lint-staged，lint-staged 是被 husky 进行调用，然后进行规则验证。

1	npm i husky lint-staged -D

安装完成后后 package.json 中进行配置。增加根字段 husky。

"husky":{
    "hooks":{
          "pre-commit":"lint-staged"
    }
},
"lint-staged":{
    "*.{js,jsx}":[
            "eslint --fix",
             "git add "
      ]
}

上面是对 pre-commit 进行了设置，其实 hooks 有很多种。
上面的配置意思是：提交之前执行 lint-staged 命令（在 modules 的 bin 文件夹中可以找到），然后配置 lint-staged 命令的规则。
当执行git commit -am "test"时，就会自动执行 lint-staged 的规则。

使用 prettier 进行格式化

由于 eslint 的格式化功能比较弱，并且支持的文件格式也不多，所以使用更强大的 prettier 会更合适，prettier 不仅能格式化 js、jsx 还能格式化 css 和 md 文件。

1	npm i prettier -D

"lint-staged":{
    "*.{js,jsx}":[
            "prittier --write",
            "eslint --fix",
             "git add "
      ],
    "*.{css,md}":[
          "prittier --write",
          "git add"
    ]
}

这个改动会比较大，所以开发的时候配置的规则最好就是 prettier，不然提交后代码变动较大。

可以在根目录创建 prettier 的配置文件 prettier.config.js，来自定义规则

module.exports = {
  tabWidth: 4,
  singleQuote: true,
};

使用了 husky 后，手动执行命令的方式就不要了。

分析各个模块的代码体积

使用webpack-bundle-analyzer可以分析各个模块的体积大小

1	npm i webpack-bundle-analyzer -D

在 webpack.config.js 配置

1	const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

在 plugins 中增加

plugins:[
      new BundleAnalyzerPlugin(),
      new HtmlWebpackPlugin(....
]

配置好后，重新启动程序

npm start

这次启动除了原本服务之外，还会启动并打开一个http://127.0.0.1:8888/的服务，打开这个就能看到各个模块的体积了。
这种方式看到是开发模式下的体积，意义不大，看到打包后放到生产环境上的体积才是有意义的。
安装了这个插件后，执行打包后也会自动启动 8888 服务，这时候看到的就是生产环境上的体积了(注意：把原来启动的 8888 关掉，不然端口冲突)

1	npm run build

禁止打包的时候自动启动服务

plugins:[
      new BundleAnalyzerPlugin({
            openAnalyzer: false, //是否打开8888服务
            analyzerMode: "static", // 生成静态的html文件
      }),
      new HtmlWebpackPlugin(....
]

这样打包后会生成一个 report.html 文件。

1	npm run build

可以在 build 的 build 目录启个服务，访问 report.html 查看结果。使用 serve

1 2	cd build/ serve

访问http://localhost:5000/report.html可以看到相通的结果。

可以控制是否生成分析文件，不然放到生产环境就不好了

plugins:[
     proces.env.GENERATE_BUNDLE_ANALYZER==="true"&&new BundleAnalyzerPlugin({
            openAnalyzer: false, //是否打开8888服务
            analyzerMode: "static", // 生成静态的html文件
      }),
      new HtmlWebpackPlugin(....
]