Question

我正在使用带有TypeScript和所有最新依赖版本的Nuxt 2。

我有一个中等大小的应用，编译时间太慢了。

我的电脑规格：锐龙7 2700X（8核心/ 16线程） 16 GB DDR4 3000MHZ NVM-SSD

客户端编译大约需要72秒。服务器编译大约需要55秒。

我的package.json

{
  "name": "nuxt",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/vue-fontawesome": "^0.1.2",
    "@nuxtjs/axios": "^5.3.4",
    "@types/lodash": "^4.14.117",
    "bulma": "^0.7.2",
    "lodash": "^4.17.11",
    "nuxt": "^2.2.0",
    "nuxt-buefy": "^0.3.1",
    "nuxt-class-component": "^1.2.1",
    "nuxt-fontawesome": "^0.3.0",
    "nuxt-property-decorator": "^1.2.0",
    "v-lazy-image": "^1.2.2",
    "vue-infinite-scroll": "^2.0.2",
    "vue-moment": "^4.0.0",
    "vue-multiselect": "^2.1.3",
    "vue-recaptcha": "^1.1.1",
    "vue2-leaflet": "^1.1.1",
    "vue2-leaflet-markercluster": "^2.0.0",
    "vue2-scrollspy": "^2.3.1",
    "vuex-class": "^0.3.0"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "devDependencies": {
    "@types/node": "^10.12.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "ts-loader": "5.3.0",
    "typescript": "^3.1.6"
  }
}

Nuxt.config.js

import parseArgs from "minimist";

// https://github.com/buefy/buefy/issues/1052
global.File = typeof window === 'undefined' ? Object : window.File;

const argv = parseArgs(process.argv.slice(2), {
    alias: {
        H: "hostname",
        p: "port"
    },
    string: ["H"],
    unknown: parameter => false
});

const port =
    argv.port ||
    process.env.PORT ||
    process.env.npm_package_config_nuxt_port ||
    "3000";
const host =
    argv.hostname ||
    process.env.HOST ||
    process.env.npm_package_config_nuxt_host ||
    "localhost";

export const env = {
    baseUrl: process.env.BASE_URL || `http://${host}:${port}`
};
export const head = {
    title: "Conference Finder",
    meta: [
        {charset: "utf-8"},
        {
            name: "viewport",
            content: "width=device-width, initial-scale=1"
        },
        {
            hid: "description",
            name: "description",
            content: "Nuxt.js project"
        }
    ],
    link: [
        {
            rel: "icon",
            type: "image/x-icon",
            href: "/favicon.ico"
        }
    ],
    script: [
        {src: 'https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit'}
    ]
};

/*
** Customize the progress-bar color
*/
export const loading = {color: "#3B8070"};

/*
** Build configuration
*/
export const css = [
    {src: "~/assets/css/main.scss", lang: 'scss'},
    {src: 'leaflet/dist/leaflet.css', lang: 'css'},
    {src: 'leaflet.markercluster/dist/MarkerCluster.css', lang: 'css'},
    {src: 'leaflet.markercluster/dist/MarkerCluster.Default.css', lang: 'css'},
    {src: 'vue-multiselect/dist/vue-multiselect.min.css', lang: 'css'}
];

export const build = {
    build: {
        babel: {
            plugins: ['transform-decorators-legacy', 'transform-class-properties']
        },
        extend (config, { isDev, isClient }) {

        }
    }
};
export const modules = [
    "@nuxtjs/axios",
    "~/modules/typescript.js",
    'nuxt-buefy',
    ["nuxt-fontawesome", {
        imports: [
            {
                set: '@fortawesome/free-solid-svg-icons',
                icons: [
                    ...]
            }, {
                set: '@fortawesome/free-brands-svg-icons',
                icons: [
                    ...
                ]
            }
        ]
    }]];
export const axios = {};
export const plugins = [
    "~/plugins/filters.ts",
    "~/plugins/vue-moment.ts",
    {src: "~/plugins/vue-lazyimage.ts", ssr: false},
    {src: "~/plugins/vue-leaflet.ts", ssr: false},
    {src: "~/plugins/vue-infinite-scroll.ts", ssr: false},
    {src: '~/plugins/vue2-scrollspy.ts', ssr: false}
];

modules / typescript.js

export default function() {
  // Add .ts extension for store, middleware and more
  this.nuxt.options.extensions.push("ts")
  // Extend build
  this.extendBuild(config => {
    const tsLoader = {
      loader: "ts-loader",
      options: {
        appendTsSuffixTo: [/\.vue$/]
      },
      exclude: [
        /vendor/,
        /\.nuxt/
      ]
    }
    // Add TypeScript loader
    config.module.rules.push(
      Object.assign(
        {
          test: /((client|server)\.js)|(\.tsx?)$/
        },
        tsLoader
      )
    )
    // Add TypeScript loader for vue files
    for (let rule of config.module.rules) {
      if (rule.loader === "vue-loader") {
        rule.options.loaders = rule.options.loaders || {}
        rule.options.loaders.ts = tsLoader
      }
    }
    // Add .ts extension in webpack resolve
    if (
      config.resolve.extensions.indexOf(".ts") ===
      -1
    ) {
      config.resolve.extensions.push(".ts")
    }
  })
}

在构建中使用--profile标志后，我确定了慢速加载程序：

加载程序│请求│时间│时间/请求│描述
ts-loader│190│50s│265ms│Ts装载机
Vue加载程序│817│57s│70ms│Vue加载程序

我有〜44个.Vue组件（全部带有TypeScript）和13个.Vue页面。

非常感谢您的帮助。

Answer 1

对于ts-loader，您应该阅读https://github.com/TypeStrong/ts-loader#faster-builds，它对我们的构建时间有很大帮助。

Answer 2

长话短说，可能的罪魁祸首是类型检查与构建的其余部分在同一线程上进行。存在一个可以将类型检查分叉到另一个线程的插件。对于我的个人项目，我只需执行以下操作即可看到 4倍加速：

使用您喜欢的软件包管理器添加模块

yarn add fork-ts-checker-webpack-plugin --dev

将以下内容添加到您的Webpack配置中：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); plugins: [new ForkTsCheckerWebpackPlugin()]

示例配置如下：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const webpackConfig = {
  context: __dirname, // to automatically find tsconfig.json
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          // disable type checker - we will use it in fork plugin
          transpileOnly: true
        }
      }
    ]
  },
  plugins: [new ForkTsCheckerWebpackPlugin()]
};

使用TypeScript（Vue-Loader和TS-Loader）的中型应用程序的构建时间极长（120+秒）

2 个答案: