WordPress JavaScript压缩

1. 咱先唠唠WordPress里JS压缩这档子事。你想啊，网站加载慢得像老牛拉车，八成是JS文件太肥了，这时候就得祭出压缩大法。简单说就是把代码里的空格、换行、注释全撸掉，变量名换成短的，但功能一点不变，就跟把羽绒服抽成真空袋似的。

2. 为啥要折腾这个？比方说你的主题里有个自定义脚本叫theme-script.js，原始大小200KB，压缩完可能只剩80KB，浏览器下载起来嗖嗖的。WordPress后台其实自带合并压缩功能，但咱得手动搞点配置。

// 在functions.php里加这段
function compress_scripts() {
    wp_script_add_data( 'my-script', 'compress', true );
}
add_action( 'wp_enqueue_scripts', 'compress_scripts' );

3. 不过自带工具有时不够带劲，咱可以上插件。比如用Autoptimize，安装完在设置里勾选"优化JavaScript代码"，它自动把多个文件拼成一个再压缩。但注意啊，有些依赖顺序的脚本别乱压，会出幺蛾子。

4. 手撸代码党可以试试Webpack或者Gulp。在主题根目录搞个gulpfile.js，装个gulp-uglify插件，运行命令就能批量压文件：

const gulp = require('gulp');
const uglify = require('gulp-uglify');

gulp.task('compress-js', function() {
    return gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

5. 压缩完了记得测试功能！曾经我把jQuery压崩了，下拉菜单全变直男不会弹了。这时候要留源地图文件（source map），调试时能定位到原始代码。现代工具一般都自动生成这个。

6. 进阶玩法：把压缩和版本控制挂钩。WordPress喜欢在文件URL后加?ver=5.0这种参数，但你一更新文件，缓存可能不失效。不如把压缩时间戳直接焊进文件名里，比如script.min-1623456789.js，用wp_enqueue_script这样挂载：

wp_enqueue_script(
    'my-compressed-script',
    get_template_directory_uri() . '/js/script.min.js',
    array(),
    filemtime( get_template_directory() . '/js/script.min.js' )
);

7. 最后扯点玄学的——压缩不是万灵丹。如果主题里塞了十个滑块库和五个动画引擎，压成芝麻也救不了。关键还是删掉用不着的代码，好比减肥先戒奶茶而不是只穿紧身衣。对了，别忘了服务器开Gzip压缩，双重压榨才是真狠人。

8. 总之呐，JS压缩就像给WordPress网站穿塑身衣，看起来苗条跑得快。但别指望它治百病，代码结构烂的话，压成饼干也没用。慢慢试，多检查，毕竟用户不会等你调试完再骂娘。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。