怎么调js文件大小

如何调节JS文件大小

压缩代码、移除无用代码、使用模块化工具、利用浏览器缓存。其中，压缩代码是最为直接和有效的方法之一，通过删除代码中的空格、注释和冗余字符，可以大幅减少文件大小。例如，使用工具如UglifyJS或Terser，可以在不影响代码功能的前提下，显著降低文件体积。

一、压缩代码

1、使用UglifyJS

UglifyJS是一个广泛使用的JavaScript压缩工具，通过删除代码中的空格、注释和无用的字符来减少文件大小。下面是使用UglifyJS的基本步骤：

安装UglifyJS：
```
npm install uglify-js -g
```
压缩文件：
```
uglifyjs yourfile.js -o yourfile.min.js
```
这个命令会生成一个压缩后的文件yourfile.min.js。

2、使用Terser

Terser是另一个强大的JavaScript压缩工具，它是UglifyJS的一个分支，提供了更多的优化选项和更好的支持ES6+的代码。

安装Terser：
```
npm install terser -g
```
压缩文件：
```
terser yourfile.js -o yourfile.min.js
```
同样，这个命令会生成一个压缩后的文件yourfile.min.js。

二、移除无用代码

1、静态代码分析

通过静态代码分析工具，可以检测并移除项目中未使用的代码。常用的工具包括ESLint和JSHint。

安装ESLint：
```
npm install eslint -g
```
配置和运行ESLint：
```
eslint --init
eslint yourfile.js
```

2、Tree Shaking

Tree Shaking是一种在构建过程中移除未引用代码的技术，通常在使用模块打包工具如Webpack时使用。

配置Webpack：

在webpack.config.js中启用Tree Shaking：

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

三、使用模块化工具

1、Webpack

Webpack是一个流行的模块打包工具，除了Tree Shaking之外，它还提供了代码分割、延迟加载等功能。

安装Webpack：
```
npm install webpack webpack-cli -g
```

配置和使用Webpack：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
};

2、Rollup

Rollup是另一个模块打包工具，特别适合用于库的打包，因为它生成的代码更加简洁和高效。

安装Rollup：
```
npm install rollup -g
```

配置和使用Rollup：

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
  },
};

四、利用浏览器缓存

1、设置缓存头

通过在服务器上设置适当的缓存头，可以让浏览器缓存JS文件，减少重复下载的次数。

在Apache服务器上设置缓存头：

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

在Nginx服务器上设置缓存头：

location ~* .(js)$ {
  expires 1y;
  add_header Cache-Control "public";
}

2、使用Service Worker

Service Worker是一种在后台运行的脚本，可以拦截网络请求并缓存资源，从而提高页面加载速度。

注册Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, err => {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

编写Service Worker脚本：

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

五、使用CDN

1、选择合适的CDN服务

使用CDN（内容分发网络）可以显著提高资源的加载速度，因为CDN在全球有多个节点，能够将资源分发到距离用户最近的服务器。

常用的CDN服务提供商：
- Cloudflare
- Akamai
- Amazon CloudFront

2、配置CDN

使用Cloudflare：
- 注册并登录Cloudflare账户。
- 添加你的网站并设置DNS。
- 配置Cloudflare的缓存设置。
使用Amazon CloudFront：
- 登录AWS管理控制台。
- 创建一个新的CloudFront分配。
- 配置源和缓存行为。

六、代码分割

1、动态导入

通过动态导入，可以在需要时才加载某个模块，从而减少初始加载时间。

使用Webpack的动态导入：

import('./module.js').then(module => {
  module.doSomething();
});

2、按需加载

按需加载可以减少初始加载时间，适用于大型应用程序。

使用React的按需加载：

import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);

3、路由懒加载

在单页应用（SPA）中，可以通过路由懒加载来按需加载页面组件。

使用React Router的路由懒加载：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);

七、使用HTTP/2

1、启用HTTP/2

HTTP/2可以显著提高资源加载速度，因为它支持多路复用、头部压缩和服务器推送。

在Apache服务器上启用HTTP/2：

<IfModule http2_module>
  Protocols h2 http/1.1
</IfModule>

在Nginx服务器上启用HTTP/2：

server {
  listen 443 ssl http2;
  server_name example.com;
  # 其他配置
}

2、使用服务器推送

服务器推送允许服务器在初始请求后立即发送所需的资源，从而减少加载时间。

在Nginx服务器上配置服务器推送：

location = /index.html {
  http2_push /style.css;
  http2_push /script.js;
}

八、使用合适的JavaScript框架和库

1、选择轻量级框架

选择轻量级的JavaScript框架和库可以减少文件大小。例如，使用PReact代替React，或使用Vue.js的核心库而不是完整库。

2、使用定制版本

一些流行的JavaScript库和框架提供了定制版本，允许你选择只包含需要的功能。例如，Lodash和Moment.js都提供了定制构建工具。

定制Lodash：

npm install lodash-cli -g lodash include=chunk,debounce

定制Moment.js：

npm install moment -g moment --custom=locales

九、代码优化

1、避免全局变量

全局变量会增加文件大小，并且可能导致命名冲突。使用局部变量和模块化代码可以减少这种问题。

2、简化逻辑

通过简化代码逻辑，可以减少代码行数，从而减少文件大小。例如，使用三元运算符代替if-else语句。

简化代码示例：

// 原始代码
if (condition) {
  result = true;
} else {
  result = false;
}
// 简化后
result = condition ? true : false;

十、其他优化措施

1、延迟加载

延迟加载可以让页面在需要时才加载某个资源，从而减少初始加载时间。例如，延迟加载图片和视频。

使用IntersectionObserver延迟加载图片：

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

2、使用现代JavaScript特性

使用现代JavaScript特性如箭头函数、模板字符串和解构赋值，可以使代码更简洁，从而减少文件大小。

示例：

// 原始代码
function sum(a, b) {
  return a + b;
}
// 使用箭头函数
const sum = (a, b) => a + b;
// 使用模板字符串
const message = `The sum of ${a} and ${b} is ${sum(a, b)}`;

通过以上方法，你可以有效地减少JavaScript文件的大小，提升网页的加载速度和用户体验。每一种方法都有其适用的场景和优势，选择合适的方法组合使用，能够达到最佳的优化效果。