性能优化篇---Webpack构建代码质量压缩

webpack配置接入CDN

•  CDN
•  网站接入CDN，需要将网页的静态资源上传到CDN服务器，使用CDN地址访问；

1.  使用CDN可以决解资源并行下载限制，处理静态资源Cookie同域名携带等问题；
2.  CDN缓存和回源需要合理的设置静态资源hash
3.  接入CDN会引入多个域名，增加域名解析时间，可进行预解析域名<link rel="dns-prefetch" href="//js.dns.com" />

•  webpack实现接入

1.  output.publicPath设置JavaScript地址
2.  css-loader.publicPath设置CSS导入的资源地址
3.  WebPlugin.stylePublicPath中设置Css文件地址 

// JavaScript  
output: {  
    publicPath: '//js.cdn.com/js/',  
    path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方  
    // 为输出的JavaScript文件名加上Hash值使用`chunkhash`（chunkhash：根据模块内容变化；hash: 根据每次构建随机）  
    filename: "js/[name].[chunkhash:8].js",  
    chunkFilename: "js/[name]-[id].[chunkhash:8].js",  
}, 

开启gzip压缩

•  使用插件：npm i -D compression-webpack-plugin;
•  webpack配置 

const CompressionPlugin = require("compression-webpack-plugin");  
plugins: [  
    new CompressionPlugin({  
        filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串  
        algorithm: 'gzip',//算法  
        test: /.(js|css)$/,    //压缩 js 与 css  
        threshold: 10240,//只处理比这个值大的资源。按字节计算  
        minRatio: 0.8//只有压缩率比这个值小的资源才会被处理  
    })  
] 

•  后台开启使用koa  

const staticCache = require('koa-static-cache');  
import config from './configs';  
const app = new Koa();  
app.use(staticCache(path.resolve(__dirname, "../dist"), {  
    maxAge: 7 * 24 * 60 * 60,  
    gzip: true, //开启  
    dynamic: true,  
})) 

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!