龙采网站建设资源分享平台,网站设计详细设计,美食门户类网站模版,清新县城乡规划建设局网站移动端CSS px自动转换成rem 需要两步来实现#xff1a; px2rem-loader 在构建阶段将px转换成remlib-flexible 页面渲染时动态计算根元素的font-size值#xff08;手机淘宝开源库#xff09;下载插件并配置#xff1a; npm i px2rem-loader lib-flexiblemodule: {rules: [{t… 移动端CSS px自动转换成rem 需要两步来实现 px2rem-loader 在构建阶段将px转换成remlib-flexible 页面渲染时动态计算根元素的font-size值手机淘宝开源库下载插件并配置 npm i px2rem-loader lib-flexiblemodule: {rules: [{test: /\.less$/,use: [MiniCssExtractPlugin.loader, css-loader,{loader: postcss-loader,...},{loader: px2rem-loader,options: {remUnit: 75,remPrecision: 8}},less-loader,]},]
}, 然后需要将淘宝的插件的内联在html文件中 script src../node_modules/lib-flexible/flexible.js/script 静态资源内联 静态资源内联是指将CSS、JS等静态文件中的内容抽离出来内联到html中。我们之前借助插件做到了将内联的资源独立成文件为什么还要将资源内联呢 资源内联的意义 代码层面页面框架的初始化脚本这些脚本往往需要在第一时间加载多将其写在head中上报相关打点CSS内联避免页面闪动HTML可以动态地将不同的meta标签内联进来请求层面减少http请求HTML和JS内联 使用raw-loader注意要使用0.5的版本新版本的存在一些问题。 npm i raw-loader0.5.1/src/meta.html 【例腾讯NOW直播官网的meta标签】
meta charsetUTF-8
meta nameviewport contentviewport-fitcover,widthdevice-width,initial-scale1,user-scalableno
meta nameformat-detection contenttelephoneno
meta namekeywords contentnow,now直播,直播,腾讯直播,QQ直播,美女直播,附近直播,才艺直播,小视频,个人直播,美女视频,在线直播,手机直播
meta namename itempropname contentNOW直播—腾讯旗下全民视频社交直播平台
meta namedescription itempropdescription contentNOW直播腾讯旗下全民高清视频直播平台汇集中外大咖最in网红草根偶像明星艺人校花小鲜肉逗逼段子手各类美食、音乐、旅游、时尚、健身达人与你24小时不间断互动直播各种奇葩刺激的直播玩法让你跃跃欲试你会发现原来人人都可以当主播赚钱
meta nameimage itempropimage contenthttps://pub.idqqimg.com/pc/misc/files/20170831/60b60446e34b40b98fa26afcc62a5f74.jpg
meta namebaidu-site-verification contentG4ovcyX25V
meta nameapple-mobile-web-app-capable contentno
meta http-equivX-UA-Compatible contentIEEdge,chrome1/node_modules/lib-flexible/flexible.js 【npm下载的淘宝库】/src/index.html
!DOCTYPE html
html langen
head${ require(raw-loader!./meta/meta.html) }titleHello Webpack/titlescript${ require(raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js) }/script !-- 先用raw-loader内联再用babel-laoder转换语法 --
/head
body
div idroot/div
/body
/html CSS内联 借助style-loader即可 {loader: style-loader,options: {insertAt: top, // 样式插入到headsingleton: true, // 将所有style标签合并成一个}
} 多页面应用打包方案 每当增加一个页面我们就手动地在webapck配置中对应增加一个entry、html-webpack-plugin。 一定可以有更优的方案那就是动态获取entry的数量、然后自动生成html-webpack-plugin。 需要借助glob.sync可以在每次构建的时候获取页面的数量。这需要我们规范目录将每个页面文件夹都放在src文件夹下每个页面文件夹入口文件是index.js入口页面是index.html。 npm i globconst glob require(glob);const setMPA () {let entry {};let htmlWebpackPlugins []; const entryFiles glob.sync(path.join(__dirname, ./src/*/index.js)); // 获取所有页面的入口文件路径。entryFiles是所有页面index.js的绝对路径形成的数组entryFiles.forEach((file){let name file.match(/src\/(.*)\/index\.js/);let pageName name name[1];entry[pageName] file;htmlWebpackPlugins.push(new HtmlWebpackPlugin({template: file.replace(index.js,index.html),filename: ${pageName}.html,chunks: [${pageName}],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: true,},}))});return {entry,htmlWebpackPlugins}
};const result setMPA();module.exports {entry: result.entry,output: {filename: bundle[chunkhash:8].js,path: path.join(__dirname, /dist)},mode: production,module: {rules: [...]},plugins: [...result.htmlWebpackPlugins, // 将N个HtmlWebpackPlugin对象插入列表new MiniCssExtractPlugin({filename: [name][contenthash:8].css}),new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require(cssnano),}),new CleanWebpackPlugin(),
}; 使用Source Map 什么是source map顾名思义就是代码地图可以将构建前后的两份代码做一个映射。 sourcemap的作用构建后的代码已经变了模样没有可读性开发调试的时候无法定位问题所在。sourcemap的存在可以直接将问题定位到源代码排查问题。 配置文件中devtool属性可以设置有非常多的类型可选一般情况下开发环境使用source-map生产环境关闭。 module.exports {devtool: source-map
}; 代码分割 对于大型的web应用来说将所有的代码编译成一个文件显示不好会造成文件体积过大以及需要加载大量与首屏无关的代码用户体验不好。webpack提供将代码分割成chunk语块当代码运行到需要的它们的时候再进行加载。 代码分割有两种类型 抽离公共资源。比如基础库入React/VueReact-Router/Vue-Router。或者自己编写的公共模块JS懒加载使得初始状态下的代码更小首屏优化抽离公共资源 需要借助插件有两个插件可供选择html-webpack-externals-plugin 和 SplitChunsPluginwebpack4内置代替webpack3的CommonsChunkPlugin 说明 两个插件不要混用html-webpack-externals-plugin既可以将本地基础库分离也可以直接使用CDN。本人试图将本地库进行分离总是失败暂没查明原因。使用SplitChunksPlugin中chunks时如果没有使用异步加载chunks建议all但如果使用了异步加载all则会导致错误这时建议用initialhtml-webpack-externals-plugin npm i html-webpack-externals-pluginconst HtmlWebpackExternalsPlugin require(html-webpack-externals-plugin);plugins: [new HtmlWebpackExternalsPlugin({externals: [{module: react, // 代码中引入的库的名称entry: https://11.url.cn/now/lib/16.2.0/react.min.js,// entry: cjs/react, // 相对于node_modules/react的路径【官网示例实际并不成功】global: React, // 代码中引入的库的全局对象的名称},{module: react-dom,entry: https://11.url.cn/now/lib/16.2.0/react-dom.min.js,// entry: dist/react-dom, // 相对于node_modules/react-dom的路径 【官网示例实际并不成功】global: ReactDOM,},],})
] SplitChunksPlugin module.exports {optimization: {splitChunks: {minSize: 0, // 分离包体积的最小大小cacheGroups: {commons: {// test: /(react|react-dom)/, // 通过正则匹配只分离react/react-dom这两个库不写test则不作限制name: commonss, // 分离块的名称需要加在HtmlWebpackPlugin插件的chunks属性中才能正确命名分离后的文件chunks: all, // 需要分割哪些代码块all表示所有代码块async按需加载的代码块initial初始化代码块// minChunks: 2, // 最小引用次数少于这个引用次数就不会单独提取出来}}}}
}; JS懒加载 实现懒加载不需要对webpack配置动态引入import()语法还没有成为JS标准也许不久的将来会目前要借助js插件 实现懒加载 如果使用的CommonJS直接require.ensure即可如果使用ES6模块化需要借助第三方插件实现。babel插件babel/plugin-syntax-dynamic-import且在.babelrc文件内配置 npm i babel/plugin-syntax-dynamic-import.babelrc
{presets: [babel/preset-react,babel/preset-env],plugins: [babel/plugin-syntax-dynamic-import, // 懒加载插件babel/plugin-proposal-class-properties]
} 在此基础上如果使用React开发项目还可以使用react-loadable插件来更好的实现异步加载 npm i react-loadableindex.js中部分代码import Loadable from react-loadable;
const TextLoad Loadable({loader: () import(/* webpackChunkName: text */ ./text), // 通过注释的方式指定打包后的chunk的名字loading: () div正在加载/div
});class Search extends React.Component{constructor(props){super(props);this.state {text: false,};}loadComponent () {this.setState({text: true})};render() {const { text } this.state;return (div你好显示字体 Hello Webpacks/div{text ? TextLoad / : null}img alt src{logo} style{{ width: 100 }} onClick{this.loadComponent}//)}
}export default Search; tree shaking摇树优化 一个文件会有多个方法、对象、语句只要用到其中一小部分便会将整个文件内的所有内容打包进去。tree shaking只把用到的方法打包进去没用到的会在uglfiy阶段被擦出掉。 使用webpack默认支持生产环境默认开启 要求必须是ES6的写法CommonJS的方式不支持 Scope Hoisting 构建之后的代码存在大量闭包导致 文件体积增大运行代码时创建的函数作用于变多内存开销变大scope hoisting就是减少闭包函数的声明。 原理将所有模块的代码按照引用顺序放在一个函数作用域里然后适当地重命名一些变量以防止变量名冲突以此减少闭包函数声明代码。 使用webpack默认支持生产环境默认开启 要求必须是ES6写法CommonJS的方式不支持 优化构件时命令行的显示日志 每次构建命令行输出大量日志有很多是我们完全不关心的想要优化它可以在webpack中设置state属性。 // 如果是打包在最外层的state属性
module.exports {stats: errors-only,
};
// 如果是devserver热更新
const devConfig {devServer: {contentBase: ./dist,hot: true,stats: errors-only, },
}; state的取值有 errors-only 只发生错误时输出minimal 只发生错误或有新的编译时输出none 没有输出normal 标准输出verbose 全部输出我们希望是在发生错误的时候输出当state为error-only时如果没有错误没有任何输出不太友好。 借助插件friendly-errors-webpack-plugin。此时将state设置成errors-only npm i friendly-errors-webpack-pluginconst FriendlyErrorsWebpackPlugin require(friendly-errors-webpack-plugin);
module.exports {plugins: [new FriendlyErrorsWebpackPlugin(),],
}; 我的博客即将同步至腾讯云社区邀请大家一同入驻https://cloud.tencent.com/developer/support-plan?invite_code1jot771valo8l 转载于:https://www.cnblogs.com/V587Chinese/p/11571515.html
