Supercharge Web Performance: Static Asset Optimization with Webpack, CDN, CSP

Introduction

This article summarizes recent projects and presents several optimization points for web static resources.

1. How to Optimize

Improving page load speed focuses on three aspects, but the article concentrates on static file loading:

Accelerate static file download.

Reduce static file size.

Reduce the number of static file requests (especially important for mobile).

2. Optimization Methods

2.1 Code Compression

During development, JavaScript and CSS follow coding standards, which add unnecessary whitespace and long variable names for readability. After deployment, these can be removed using tools like Webpack.

var CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(new CompressionWebpackPlugin({
  asset: '[path].gz[query]',
  algorithm: 'gzip',
  test: new RegExp('\\.(js|css)$'),
  threshold: 10240,
  minRatio: 0.8
}));

The above configuration gzips JS and CSS files larger than 10 KB with a compression ratio better than 0.8.

2.2 File Merging

Modern projects often include many third‑party libraries (jQuery, axios, weixin‑js‑sdk, lodash, bootstrap, etc.), each with its own script or style file, leading to dozens of requests. To reduce request count:

Merge JavaScript files.

Merge CSS files.

Combine images into a sprite sheet and reference them via CSS offsets.

Example sprite usage is shown in the image below:

2.3 Gzip Compression

After merging and compressing files, gzip further reduces size. The resulting files include original .js and .css as well as .gz versions.

File size of vendor.[hash].js dropped from 318 KB to under 100 KB.

2.4 CDN and Caching

Using a CDN distributes static content closer to users, dramatically reducing latency. The article adopts the company’s TEG CDN, which provides hosted source stations, Rsync‑based deployment, and HTTPS certificate support.

2.5 Security – CSP

To mitigate XSS, a Content‑Security‑Policy header or meta tag restricts script sources. Example meta tag:

<meta http-equiv="Content-Security-Policy" content="object-src 'self'; font-src 'self' https: data:; script-src 'self' https://cdn.xxxx.qq.com 'unsafe-inline'">

Both the CDN domain and the business domain are whitelisted, and the 'unsafe-inline' directive is added where necessary.

3. Webpack 2.0

Webpack 2’s tree‑shaking feature can reduce bundle size by about 30 % for ES modules. Differences between ES modules and CommonJS are highlighted.

new webpack.optimize.UglifyJsPlugin({
  compress: { warnings: false },
  sourceMap: true
}),
new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css') }),
new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } })

The final build outputs compressed CSS in app.[hash].css and JavaScript in app.[hash].js and vendor.[hash].js, with significantly reduced content size.

4. Side Note – CORS

Modern browsers enforce strict cross‑origin policies. JSONP only supports GET, while CORS supports both GET and POST but requires proper server‑side headers.

Method

Support

Allowed HTTP Methods

JSONP

Supported

GET

CORS

Not supported in IE9‑

GET, POST

Adopting CORS is the prevailing trend for handling cross‑domain requests.