Said in front

The react + Webpack + typescript + TSLint technology stack is used in the project, and the speed has been greatly improved after optimization.

Optimize the previous WebPack configuration

    module.exports = { ... .module: {
            rules: [{test: /\.tsx? $/.use: [{loader: 'awesome-typescript-loader'.options: {
                                configFileName: './tsconfig.json'.useCache: true,}}],}, {test: /\.tsx? $/.enforce: 'pre'.loader: 'tslint-loader'.options: {
                        configFile: path.resolve(__dirname, './tslint.json'),
                        emitErrors: true.failOnHint: true},},]}}Copy the code

Why would you want to deprecate awesome-typescript-loader? This is because whenever the file is changed, the Loader will go to the translation and type check again, and the project slowly grows, especially affecting the development speed, and there will be omission of type check.

The @babel/preset-typescript scheme removes typescript and shifts to JS, which makes it fast to compile.

Optimized WebPack configuration

            {
                test: /\.(jsx? |tsx?) $/.use: ['thread-loader'.// Use thread-loader to compile source files
                    {
                        loader: 'babel-loader'.options: {
                            presets: ['@babel/preset-typescript'].plugins: [["@babel/plugin-proposal-decorators", {
                                    legacy: true }],
                                ['@babel/plugin-transform-typescript', {
                                    allExtensions: true.isTSX: true.allowNamespaces: true}],]},},}, {test: /\.tsx? $/.use: ['eslint-loader'].In addition to the / / because ts, eslint is adopted to test code, at the same time two plugins to add ForkTsCheckerWebpackPlugin and ForkTsCheckerNotifierWebpackPlugin lint a process to do alone
            },
Copy the code

Babel.config.js (Babel configuration file)

module.exports = function (api) {
    api.cache(true);

    const presets = [
        "@babel/preset-typescript"."@babel/preset-react"."@babel/preset-env"."mobx"
    ];
    const plugins = [
        "react-hot-loader/babel"."@babel/proposal-object-rest-spread"["@babel/plugin-transform-runtime"],
        ["@babel/plugin-transform-modules-commonjs", { "strictMode": true }],
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]].return {
        presets,
        plugins
    };
}
Copy the code

.eslintrc.js (esLint configuration file)

module.exports = {
    parser:  '@typescript-eslint/parser'.// Define a parser for ESLint
    extends: [
        'plugin:react/recommended'.'plugin:@typescript-eslint/recommended'].// Define a subspecification for file inheritance
    plugins: ['@typescript-eslint'].// Defines the plugins that the ESLint file depends on
    env:{                                  // Specify the environment in which the code is run
        browser: true.node: true.commonjs: true.es6: true
    },
    settings: {                            // Automatically discover the React version to regulate the React code
        "react": {
            "pragma": "React"."version": "detect"}},parserOptions: {                       // Specifies that ESLint can parse JSX syntax
        "ecmaVersion": 2019."sourceType": 'module'."ecmaFeatures": {jsx:true}},rules: {}}Copy the code

In particular, with babel-loader, we can’t directly use the hot module of webpack-dev-server. Instead, we should use react-hot-loader to handle hot updates.

The new package. The json

    devDependencies: {
        "@babel/core": "^ 7.9.0"."@babel/plugin-proposal-class-properties": "^ 7.8.3"."@babel/plugin-proposal-decorators": "^ 7.8.3"."@babel/plugin-proposal-object-rest-spread": "^ 7.9.5"."@babel/plugin-transform-modules-commonjs": "^ 7.9.0"."@babel/plugin-transform-runtime": "^ 7.9.0"."@babel/plugin-transform-strict-mode": "^ 7.8.3".// To set whether the packed JS is in strict mode
        "@babel/preset-env": "^ 7.9.5"."@babel/preset-react": "^ 7.9.4"."@babel/preset-typescript": "^ 7.9.0"."@typescript-eslint/eslint-plugin": "2.27.0"."@typescript-eslint/parser": "2.27.0"."babel-loader": "^ 8.1.0"."babel-plugin-transform-class-properties": "^ 6.24.1"."babel-plugin-transform-decorators-legacy": "^ 1.3.5." "."babel-preset-mobx": "^ 2.0.0." ".// Mobx is used in the project
        "eslint": "^ 6.8.0"."eslint-loader": "^ 4.0.0"."eslint-plugin-react": "^ 7.19.0"."react-hot-loader": "^ 4.12.20",},dependencies: {
        "@babel/runtime": "^ 7.9.2".// Required at build time
    }
Copy the code