从零搭建到高效部署我的前端项目实战经验分享

程序员令敏发布于 2026-03-30 08:37:33 前端阅读 717

原创

本文链接：https://www.jztheme.com/blog/front-end/40725.html

程序员令敏

赞 26 收藏反馈

优化前：卡得不行

上周接到一个任务，优化公司某个项目的部署性能。说实话，刚打开页面的时候我人都傻了——首屏加载时间超过5秒，切换页面时还会出现明显的白屏。在现在这个网速动辄几百兆的时代，这种体验真的让人崩溃。

尤其是移动端表现更差，在3G网络下甚至要等十几秒才能看到内容。老板已经收到好几个用户投诉了，说网站“慢得像蜗牛”。没办法，只能硬着头皮开始优化。

找到瓶颈了！

一开始我以为是后端接口太慢，但用Chrome DevTools的Network面板一看，发现问题主要出在前端资源加载上：

单个JS文件体积超过1MB
CSS文件没有压缩
图片全是未压缩的高清原图
没有任何缓存策略

我试了几种方案，最后发现最有效的还是从打包配置和服务器设置入手。

核心优化手段

先说最重要的部分——Webpack配置优化。原来的配置简直惨不忍睹：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      { test: /.js$/, use: 'babel-loader' }
    ]
  }
};

这配置看着就头疼，完全没有做任何性能优化。我花了两天时间重构，加入了以下关键配置：

代码分割

最大的问题就是把所有代码都打包到一个文件里，导致体积太大。我改用了动态导入：

// 原始写法
import SomeComponent from './components/SomeComponent';

// 改成动态导入
const SomeComponent = React.lazy(() => import('./components/SomeComponent'));

Tree Shaking

确保只打包用到的代码，修改package.json：

{
  "sideEffects": false
}

压缩与混淆

添加Terser插件：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

图片优化

原来的图片处理简直灾难，直接用原图。我加了image-webpack-loader：

{
  test: /.(png|jpe?g|gif|svg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        fallback: 'file-loader',
      },
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.65, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 }
      }
    }
  ]
}

服务器端的配合

光靠前端优化还不够，服务器也得配合。我调整了Nginx配置：

server {
    listen 80;
    server_name example.com;

    location / {
        # 开启Gzip压缩
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        # 配置缓存策略
        expires 1y;
        add_header Cache-Control "public";
    }

    # 配置Brotli压缩
    brotli on;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}