前端工具链优化让你的开发效率飞起来毒舌时刻工具链优化听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便配置一下构建工具就能提高开发效率别做梦了到时候你会发现工具链配置出错的概率比代码出错还高。你以为Webpack是万能的别天真了Webpack的配置文件就像是天书调试起来也非常麻烦。还有那些所谓的现代构建工具看起来简单用起来却各种问题。为什么你需要这个提高开发效率优化工具链可以减少构建时间提高开发效率。优化代码质量工具链中的代码质量工具可以帮助你发现和修复代码中的问题提高代码质量。减少错误工具链中的测试工具可以帮助你发现和修复错误减少生产环境中的问题。改善用户体验优化工具链可以减少打包后的文件大小提高应用的加载速度改善用户体验。便于团队协作统一的工具链配置可以便于团队成员之间的协作减少沟通成本。反面教材// 这是一个典型的糟糕工具链配置 // package.json { name: my-app, version: 1.0.0, scripts: { start: webpack serve, build: webpack, test: jest }, dependencies: { react: ^17.0.2, react-dom: ^17.0.2 }, devDependencies: { webpack: ^5.64.4, webpack-cli: ^4.9.1, webpack-dev-server: ^4.6.0, babel-loader: ^8.2.3, babel/core: ^7.16.0, babel/preset-react: ^7.16.0, css-loader: ^6.5.1, style-loader: ^3.3.1, html-webpack-plugin: ^5.5.0, jest: ^27.4.3 } } // webpack.config.js const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports { entry: ./src/index.js, output: { path: path.resolve(__dirname, dist), filename: bundle.js }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: babel-loader } }, { test: /\.css$/, use: [style-loader, css-loader] } ] }, plugins: [ new HtmlWebpackPlugin({ template: ./src/index.html }) ], devServer: { port: 3000 } };问题构建时间长影响开发效率打包后的文件体积大影响应用加载速度缺少代码质量工具难以保证代码质量缺少热模块替换开发体验差配置复杂难以维护正确的做法选择合适的构建工具Vite// package.json { name: my-app, private: true, version: 0.0.0, type: module, scripts: { dev: vite, build: vite build, preview: vite preview, test: jest }, dependencies: { react: ^18.2.0, react-dom: ^18.2.0 }, devDependencies: { types/react: ^18.2.43, types/react-dom: ^18.2.17, vitejs/plugin-react: ^4.2.1, vite: ^5.0.8, jest: ^29.7.0 } } // vite.config.js import { defineConfig } from vite import react from vitejs/plugin-react // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 3000, hot: true }, build: { outDir: dist, minify: terser, sourcemap: false } })Webpack优化// webpack.config.js const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); const { CleanWebpackPlugin } require(clean-webpack-plugin); const MiniCssExtractPlugin require(mini-css-extract-plugin); const TerserPlugin require(terser-webpack-plugin); const CssMinimizerPlugin require(css-minimizer-webpack-plugin); const { BundleAnalyzerPlugin } require(webpack-bundle-analyzer); module.exports { mode: process.env.NODE_ENV production ? production : development, entry: ./src/index.js, output: { path: path.resolve(__dirname, dist), filename: [name].[contenthash].js, chunkFilename: [name].[contenthash].chunk.js }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: babel-loader, options: { presets: [babel/preset-react], plugins: [babel/plugin-transform-runtime] } } }, { test: /\.css$/, use: [ process.env.NODE_ENV production ? MiniCssExtractPlugin.loader : style-loader, css-loader ] }, { test: /\.(png|jpg|gif|svg)$/, type: asset, parser: { dataUrlCondition: { maxSize: 1024 * 10 // 10KB } } } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: ./src/index.html, minify: process.env.NODE_ENV production ? { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true } : false }), new MiniCssExtractPlugin({ filename: [name].[contenthash].css, chunkFilename: [id].[contenthash].css }), new BundleAnalyzerPlugin({ analyzerMode: process.env.NODE_ENV production ? static : disabled }) ], optimization: { splitChunks: { chunks: all, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: vendors, chunks: all } } }, minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: process.env.NODE_ENV production } } }), new CssMinimizerPlugin() ] }, devServer: { port: 3000, hot: true, open: true }, cache: { type: filesystem, buildDependencies: { config: [__filename] } } };包管理器优化pnpm# 安装pnpm npm install -g pnpm # 初始化项目 pnpm init # 安装依赖 pnpm add react react-dom pnpm add -D vite vitejs/plugin-react依赖管理// package.json { name: my-app, private: true, version: 0.0.0, type: module, scripts: { dev: vite, build: vite build, preview: vite preview, test: jest, lint: eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0, format: prettier --write . }, dependencies: { react: ^18.2.0, react-dom: ^18.2.0 }, devDependencies: { types/react: ^18.2.43, types/react-dom: ^18.2.17, vitejs/plugin-react: ^4.2.1, eslint: ^8.55.0, eslint-plugin-react: ^7.33.2, eslint-plugin-react-hooks: ^4.6.0, eslint-plugin-react-refresh: ^0.4.5, prettier: ^3.1.1, vite: ^5.0.8, jest: ^29.7.0 } }代码质量工具ESLint配置// .eslintrc.js module.exports { env: { browser: true, es2021: true, node: true }, extends: [ eslint:recommended, plugin:react/recommended, plugin:react-hooks/recommended ], parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 12, sourceType: module }, plugins: [ react, react-hooks ], rules: { react/prop-types: off, react/react-in-jsx-scope: off } };Prettier配置// .prettierrc.js module.exports { semi: true, trailingComma: es5, singleQuote: true, printWidth: 80, tabWidth: 2 };测试工具Jest配置// jest.config.js module.exports { testEnvironment: jsdom, transform: { ^.\\.(js|jsx)$: babel-jest }, moduleNameMapper: { \\.(css|less|scss|sass)$: identity-obj-proxy }, setupFilesAfterEnv: [rootDir/src/setupTests.js] }; // src/setupTests.js import testing-library/jest-dom;开发服务器优化Vite开发服务器// vite.config.js import { defineConfig } from vite import react from vitejs/plugin-react import path from path // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { : path.resolve(__dirname, ./src) } }, server: { port: 3000, hot: true, open: true, proxy: { /api: { target: http://localhost:8000, changeOrigin: true, secure: false } } }, build: { outDir: dist, minify: terser, sourcemap: false, rollupOptions: { output: { manualChunks: { vendor: [react, react-dom], router: [react-router-dom] } } } } })毒舌点评工具链优化确实能提高开发效率但我见过太多开发者滥用这个特性导致工具链配置变得过于复杂。想象一下当你花了几个小时配置工具链结果发现构建失败了你需要调试工具链配置这比写代码还麻烦。还有那些过度优化的工具链包含了太多不必要的插件和配置导致构建时间反而增加了。比如为了减少几KB的文件大小添加了大量的优化插件结果构建时间增加了几倍。所以在优化工具链时一定要把握好度。不要为了优化而优化要根据实际情况来决定工具链的配置。当然对于大型项目来说工具链优化是必不可少的。但对于小型项目过度的工具链优化反而会增加开发成本和维护难度。最后记住一句话工具链的目的是为了提高开发效率而不是为了炫技。如果你的工具链配置导致开发变得更慢或更复杂那你就失败了。
前端工具链优化：让你的开发效率飞起来
前端工具链优化让你的开发效率飞起来毒舌时刻工具链优化听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便配置一下构建工具就能提高开发效率别做梦了到时候你会发现工具链配置出错的概率比代码出错还高。你以为Webpack是万能的别天真了Webpack的配置文件就像是天书调试起来也非常麻烦。还有那些所谓的现代构建工具看起来简单用起来却各种问题。为什么你需要这个提高开发效率优化工具链可以减少构建时间提高开发效率。优化代码质量工具链中的代码质量工具可以帮助你发现和修复代码中的问题提高代码质量。减少错误工具链中的测试工具可以帮助你发现和修复错误减少生产环境中的问题。改善用户体验优化工具链可以减少打包后的文件大小提高应用的加载速度改善用户体验。便于团队协作统一的工具链配置可以便于团队成员之间的协作减少沟通成本。反面教材// 这是一个典型的糟糕工具链配置 // package.json { name: my-app, version: 1.0.0, scripts: { start: webpack serve, build: webpack, test: jest }, dependencies: { react: ^17.0.2, react-dom: ^17.0.2 }, devDependencies: { webpack: ^5.64.4, webpack-cli: ^4.9.1, webpack-dev-server: ^4.6.0, babel-loader: ^8.2.3, babel/core: ^7.16.0, babel/preset-react: ^7.16.0, css-loader: ^6.5.1, style-loader: ^3.3.1, html-webpack-plugin: ^5.5.0, jest: ^27.4.3 } } // webpack.config.js const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports { entry: ./src/index.js, output: { path: path.resolve(__dirname, dist), filename: bundle.js }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: babel-loader } }, { test: /\.css$/, use: [style-loader, css-loader] } ] }, plugins: [ new HtmlWebpackPlugin({ template: ./src/index.html }) ], devServer: { port: 3000 } };问题构建时间长影响开发效率打包后的文件体积大影响应用加载速度缺少代码质量工具难以保证代码质量缺少热模块替换开发体验差配置复杂难以维护正确的做法选择合适的构建工具Vite// package.json { name: my-app, private: true, version: 0.0.0, type: module, scripts: { dev: vite, build: vite build, preview: vite preview, test: jest }, dependencies: { react: ^18.2.0, react-dom: ^18.2.0 }, devDependencies: { types/react: ^18.2.43, types/react-dom: ^18.2.17, vitejs/plugin-react: ^4.2.1, vite: ^5.0.8, jest: ^29.7.0 } } // vite.config.js import { defineConfig } from vite import react from vitejs/plugin-react // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 3000, hot: true }, build: { outDir: dist, minify: terser, sourcemap: false } })Webpack优化// webpack.config.js const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); const { CleanWebpackPlugin } require(clean-webpack-plugin); const MiniCssExtractPlugin require(mini-css-extract-plugin); const TerserPlugin require(terser-webpack-plugin); const CssMinimizerPlugin require(css-minimizer-webpack-plugin); const { BundleAnalyzerPlugin } require(webpack-bundle-analyzer); module.exports { mode: process.env.NODE_ENV production ? production : development, entry: ./src/index.js, output: { path: path.resolve(__dirname, dist), filename: [name].[contenthash].js, chunkFilename: [name].[contenthash].chunk.js }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: babel-loader, options: { presets: [babel/preset-react], plugins: [babel/plugin-transform-runtime] } } }, { test: /\.css$/, use: [ process.env.NODE_ENV production ? MiniCssExtractPlugin.loader : style-loader, css-loader ] }, { test: /\.(png|jpg|gif|svg)$/, type: asset, parser: { dataUrlCondition: { maxSize: 1024 * 10 // 10KB } } } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: ./src/index.html, minify: process.env.NODE_ENV production ? { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true } : false }), new MiniCssExtractPlugin({ filename: [name].[contenthash].css, chunkFilename: [id].[contenthash].css }), new BundleAnalyzerPlugin({ analyzerMode: process.env.NODE_ENV production ? static : disabled }) ], optimization: { splitChunks: { chunks: all, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: vendors, chunks: all } } }, minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: process.env.NODE_ENV production } } }), new CssMinimizerPlugin() ] }, devServer: { port: 3000, hot: true, open: true }, cache: { type: filesystem, buildDependencies: { config: [__filename] } } };包管理器优化pnpm# 安装pnpm npm install -g pnpm # 初始化项目 pnpm init # 安装依赖 pnpm add react react-dom pnpm add -D vite vitejs/plugin-react依赖管理// package.json { name: my-app, private: true, version: 0.0.0, type: module, scripts: { dev: vite, build: vite build, preview: vite preview, test: jest, lint: eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0, format: prettier --write . }, dependencies: { react: ^18.2.0, react-dom: ^18.2.0 }, devDependencies: { types/react: ^18.2.43, types/react-dom: ^18.2.17, vitejs/plugin-react: ^4.2.1, eslint: ^8.55.0, eslint-plugin-react: ^7.33.2, eslint-plugin-react-hooks: ^4.6.0, eslint-plugin-react-refresh: ^0.4.5, prettier: ^3.1.1, vite: ^5.0.8, jest: ^29.7.0 } }代码质量工具ESLint配置// .eslintrc.js module.exports { env: { browser: true, es2021: true, node: true }, extends: [ eslint:recommended, plugin:react/recommended, plugin:react-hooks/recommended ], parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 12, sourceType: module }, plugins: [ react, react-hooks ], rules: { react/prop-types: off, react/react-in-jsx-scope: off } };Prettier配置// .prettierrc.js module.exports { semi: true, trailingComma: es5, singleQuote: true, printWidth: 80, tabWidth: 2 };测试工具Jest配置// jest.config.js module.exports { testEnvironment: jsdom, transform: { ^.\\.(js|jsx)$: babel-jest }, moduleNameMapper: { \\.(css|less|scss|sass)$: identity-obj-proxy }, setupFilesAfterEnv: [rootDir/src/setupTests.js] }; // src/setupTests.js import testing-library/jest-dom;开发服务器优化Vite开发服务器// vite.config.js import { defineConfig } from vite import react from vitejs/plugin-react import path from path // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { : path.resolve(__dirname, ./src) } }, server: { port: 3000, hot: true, open: true, proxy: { /api: { target: http://localhost:8000, changeOrigin: true, secure: false } } }, build: { outDir: dist, minify: terser, sourcemap: false, rollupOptions: { output: { manualChunks: { vendor: [react, react-dom], router: [react-router-dom] } } } } })毒舌点评工具链优化确实能提高开发效率但我见过太多开发者滥用这个特性导致工具链配置变得过于复杂。想象一下当你花了几个小时配置工具链结果发现构建失败了你需要调试工具链配置这比写代码还麻烦。还有那些过度优化的工具链包含了太多不必要的插件和配置导致构建时间反而增加了。比如为了减少几KB的文件大小添加了大量的优化插件结果构建时间增加了几倍。所以在优化工具链时一定要把握好度。不要为了优化而优化要根据实际情况来决定工具链的配置。当然对于大型项目来说工具链优化是必不可少的。但对于小型项目过度的工具链优化反而会增加开发成本和维护难度。最后记住一句话工具链的目的是为了提高开发效率而不是为了炫技。如果你的工具链配置导致开发变得更慢或更复杂那你就失败了。
