新手必备！React + TypeScript 开发环境搭设指南（二）

2024-02-05 13:37:06

深入 webpack，提高打包效率

优化 CSS 代码

在上一篇文章中，我们已经介绍了如何使用 webpack 来打包 JavaScript 代码。现在，让我们来看看如何优化 CSS 代码。

webpack 提供了一个叫做 optimize-css-assets-webpack-plugin 的插件，它可以帮助我们压缩 CSS 代码。这个插件使用 cssnano 压缩器来优化 CSS 代码，可以有效减少 CSS 代码的大小。

要使用这个插件，我们需要在 webpack.config.js 文件中安装它：

npm install optimize-css-assets-webpack-plugin --save-dev

然后，在 webpack.config.js 文件中添加如下代码：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    // ...
    new OptimizeCSSAssetsPlugin({}),
  ],
};

代码拆分

代码拆分是将代码分成多个小块，然后只加载当前页面需要的代码。这可以提高页面的加载速度，因为浏览器只需要加载当前页面需要的代码，而不需要加载整个项目的所有代码。

webpack 提供了一个叫做 splitChunks 的插件，它可以帮助我们实现代码拆分。

要使用这个插件，我们需要在 webpack.config.js 文件中安装它：

npm install webpack.split-chunks --save-dev

然后，在 webpack.config.js 文件中添加如下代码：

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.optimize.SplitChunksPlugin({
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
    }),
  ],
};

使用热更新和代理服务器

热更新

热更新是一种可以在不重新加载页面的情况下更新代码的技術。这可以极大地提高开发效率，因为我们只需要保存更改过的代码，浏览器就会自动重新加载页面。

webpack 提供了一个叫做 webpack-dev-server 的工具，它可以帮助我们实现热更新。

要使用这个工具，我们需要在 webpack.config.js 文件中安装它：

npm install webpack-dev-server --save-dev

然后，在 webpack.config.js 文件中添加如下代码：

const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};

代理服务器

代理服务器是一种将请求转发到另一个服务器的服务器。这可以帮助我们解决跨域问题，因为我们可以将请求转发到另一个允许跨域请求的服务器上。

webpack 提供了一个叫做 webpack-dev-middleware 的工具，它可以帮助我们实现代理服务器。

要使用这个工具，我们需要在 webpack.config.js 文件中安装它：

npm install webpack-dev-middleware --save-dev

然后，在 webpack.config.js 文件中添加如下代码：

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
    proxy: {
      '/api/*': {
        target: 'http://localhost:3000',
        secure: false,
      },
    },
  },
};