用户体验页面间切换加载慢怎么办?友好网站

是按照项目的模块分的文件夹,每个模块都有三个内容:vue文件,js文件,html文件。这三个文件的作用相当于做SPA单页面应用时,根目录的.html页面模板,src文件下的main.vue的功能。js,但现在由于是多页面,因此入口也没多了,我目前就是两个:和cell,之后如果打包,就会在dist文件夹下生成两个html文件:.html(可以参考一下单页面应用时,打包只会生成一个.

用户体验

页面切换速度慢,不流畅,用户体验差,尤其是在移动设备上

页面片段切换速度快,用户体验好,包括在移动设备上

可以实现转场动画

无法实现

易于实现(移动应用动态效果)

页间传递数据

依赖URL,否则实现起来很麻烦

因为在一个页面内,很容易在页面之间传递数据

搜索引擎优化 (SEO)

可以直接做

需要单独解决,有点麻烦

特殊适用范围

需要一个搜索引擎友好的网站

p>

对体验要求高的应用,尤其是移动应用

搜索引擎优化 (SEO)

可以直接做

需要单独解决,有点麻烦

开发难度

更低,更容易选择框架

较高,需要专门的框架来降低该模式的开发难度

为什么要用Vue写多个页面

vue 只是一个工具。它被用作操作 dom 以写入多个页面的工具。有单页的优点,是多页的体现(具体看需求)

准备构建多页应用程序

新建一个项目,该项目需要一个“glob”:“^7.0.3”个依赖项

修改配置

我们需要更改的文件

// utils.js文件/* 这里是添加的部分 ---------------------------- 开始 */// glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件var glob = require('glob')// 页面模板var HtmlWebpackPlugin = require('html-webpack-plugin')// 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹var PAGE_PATH = path.resolve(__dirname, '../src/pages')// 用于做相应的merge处理var merge = require('webpack-merge')//多入口配置// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在// 那么就作为入口处理exports.entries = function () {    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')    var map = {}    entryFiles.forEach((filePath) => {        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))        map[filename] = filePath    })    return map}//多页面输出配置// 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中exports.htmlPlugin = function () {    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')    let arr = []    entryHtml.forEach((filePath) => {        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))        let conf = {            // 模板来源            template: filePath,            // 文件名称            filename: filename + '.html',            // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本            chunks: ['manifest', 'vendor', filename],            inject: true        }        if (process.env.NODE_ENV === 'production') {            conf = merge(conf, {                minify: {                    removeComments: true,                    collapseWhitespace: true,                    removeAttributeQuotes: true                },                chunksSortMode: 'dependency'            })        }        arr.push(new HtmlWebpackPlugin(conf))    })    return arr}/* 这里是添加的部分 ---------------------------- 结束 */

.base.conf.js 文件

module.exports = {  /* 修改部分 ---------------- 开始 */  entry: utils.entries(),  /* 修改部分 ---------------- 结束 */  output: {    path: config.build.assetsRoot,

.dev.conf.js 文件

    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage    new webpack.HotModuleReplacementPlugin(),    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    /* 注释这个区域的文件 ------------- 开始 */    // new HtmlWebpackPlugin({    //   filename: 'index.html',    //   template: 'index.html',    //   inject: true    // }),    /* 注释这个区域的文件 ------------- 结束 */    new FriendlyErrorsPlugin()    /* 添加 .concat(utils.htmlPlugin()) ------------------ */  ].concat(utils.htmlPlugin())})

.prod.conf.js 文件

    new OptimizeCSSPlugin({      cssProcessorOptions: {        safe: true      }    }),    // generate dist index.html with correct asset hash for caching.    // you can customize output by editing /index.html    // see https://github.com/ampedandwired/html-webpack-plugin    /* 注释这个区域的内容 ---------------------- 开始 */    // new HtmlWebpackPlugin({    //   filename: config.build.index,    //   template: 'index.html',    //   inject: true,    //   minify: {    //     removeComments: true,    //     collapseWhitespace: true,    //     removeAttributeQuotes: true    //     // more options:    //     // https://github.com/kangax/html-minifier#options-quick-reference    //   },    //   // necessary to consistently work with multiple chunks via CommonsChunkPlugin    //   chunksSortMode: 'dependency'    // }),    /* 注释这个区域的内容 ---------------------- 结束 */    // split vendor js into its own file    new webpack.optimize.CommonsChunkPlugin({      name: 'vendor',      minChunks: function (module, count) {        // any required modules inside node_modules are extracted to vendor        return (          module.resource &&          /\.js$/.test(module.resource) &&          module.resource.indexOf(            path.join(__dirname, '../node_modules')          ) === 0        )      }    }),    // extract webpack runtime and module manifest to its own file in order to    // prevent vendor hash from being updated whenever app bundle is updated    new webpack.optimize.CommonsChunkPlugin({      name: 'manifest',      chunks: ['vendor']    }),    // copy custom static assets    new CopyWebpackPlugin([{      from: path.resolve(__dirname, '../static'),      to: config.build.assetsSubDirectory,      ignore: ['.*']    }])    /* 该位置添加 .concat(utils.htmlPlugin()) ------------------- */  ].concat(utils.htmlPlugin())})if (config.build.productionGzip) {  var CompressionWebpackPlugin = require('compression-webpack-plugin')  webpackConfig.plugins.push(    new CompressionWebpackPlugin({      asset: '[path].gz[query]',      algorithm: 'gzip',      test: new RegExp(        '\\.(' +        config.build.productionGzipExtensions.join('|') +        ')$'      ),      threshold: 10240,      minRatio: 0.8    })  )}if (config.build.bundleAnalyzerReport) {  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin  webpackConfig.plugins.push(new BundleAnalyzerPlugin())}module.exports = webpackConfig

src是我使用的项目文件,,,,分别是静态资源文件,组件文件,页面文件

1285010-20180410140249677-577855313.png

是根据项目的模块划分的文件夹,每个模块有三个内容:vue文件、js文件、html文件。这三个文件的功能相当于制作SPA单页应用时根目录下的.html页面模板、src文件下的main.js和app.vue的功能。

原来入口文件只有一个Main.js,现在多页了,所以入口不多。我目前只有两个:和单元格。如果以后打包的话,会在 dist 文件夹下。生成两个html文件:.html和cell.html(可以参考单页应用,打包只会生成一个.html)

参考:

转载于:

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论